/* src/components/app/app.module.css */
.app_app {
  position: fixed;
  inset: 0;
  padding: 0;
  margin: 0;
  background-color: var(--color-bg-main);
  color: var(--color-text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: var(--font-size-main);
  transition: background-color 0.2s linear;
}

/* src/app/styles/light.module.css */
.light_root {
  --color-bg-main: #dae5f5;
  --color-text: #323942;
  --color-text-hover: #21252b;
  --color-text-secondary: #536073;
  --color-text-input: #21252b;
  --color-action: #5087d4;
  --color-action-hover: #5a92e0;
  --color-text-action: #dce7f5;
  --color-text-action-hover: #ffffff;
  --color-border: #a1b6d4;
  --color-danger: #f03e35;
  --color-danger-hover: #e0382f;
  --color-bg-overlay: #191c1f80;
  --color-shadow-lg: #141f291f;
  --color-shadow-md: #141f291f;
  --color-shadow-sm: #141f291a;
  --color-shadow-xs: #141f290f;
  --shadow-xs: 0 2px 2px 0 var(--color-shadow-xs), 0 2px 4px 0 var(--color-shadow-xs);
  --shadow-sm: 0 4px 8px 0 var(--color-shadow-sm), 0 8px 24px 0 var(--color-shadow-sm);
  --shadow-md: 0 8px 16px 0 var(--color-shadow-md), 0 16px 48px 0 var(--color-shadow-md);
  --shadow-lg: 0 16px 32px 0 var(--color-shadow-lg), 0 32px 144px 0 var(--color-shadow-lg);
}

/* src/app/styles/dark.module.css */
.dark_root {
  --color-bg-main: #222830;
  --color-border: #38475c;
  --color-text: #cedbed;
  --color-text-hover: #edf3fa;
  --color-text-secondary: #a7b2c2;
  --color-text-input: #edf3fa;
  --color-action: #5087d4;
  --color-action-hover: #5a92e0;
  --color-text-action: #dce7f5;
  --color-text-action-hover: #ffffff;
  --color-danger: #d1322a;
  --color-danger-hover: #e0382f;
  --color-bg-overlay: #00000080;
  --color-shadow-lg: #0000003d;
  --color-shadow-md: #0000003d;
  --color-shadow-sm: #0003;
  --color-shadow-xs: #0000001f;
  --shadow-xs: 0 2px 2px 0 var(--color-shadow-xs), 0 2px 4px 0 var(--color-shadow-xs);
  --shadow-sm: 0 4px 8px 0 var(--color-shadow-sm), 0 8px 24px 0 var(--color-shadow-sm);
  --shadow-md: 0 8px 16px 0 var(--color-shadow-md), 0 16px 48px 0 var(--color-shadow-md);
  --shadow-lg: 0 16px 32px 0 var(--color-shadow-lg), 0 32px 144px 0 var(--color-shadow-lg);
}

/* src/app/styles/common.module.css */
.common_root {
  --header-height: 48px;
  --font-size-main: 16px;
  --mobile-view-breakpoint: 440px;
}

/* src/components/router/route.module.css */
.route_link {
  color: inherit;
}

/* src/components/theme-switcher/theme-switcher.module.css */
.theme_switcher_switcher {
  position: relative;
  width: 48px;
  height: 24px;
  background-color: var(--color-border);
  border-radius: 12px;
  cursor: pointer;
}
.theme_switcher_control {
  width: 18px;
  height: 18px;
  position: absolute;
  left: 3px;
  top: 3px;
  border-radius: 10px;
  background-color: var(--color-action);
  transition: transform 0.2s ease-in-out;
}
.theme_switcher_control.theme_switcher_checked {
  transform: translate(24px, 0);
}
.theme_switcher_moon,
.theme_switcher_sun {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 6px;
  stroke: var(--color-bg-main);
}
.theme_switcher_moon {
  right: 6px;
}
.theme_switcher_sun {
  left: 6px;
}

/* src/components/select/select.module.css */
.select_select {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--color-border);
  padding: 4px 4px 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}
.select_select:hover {
  border: 2px solid var(--color-action);
}
.select_value {
  line-height: 20px;
  font-size: 14px;
}
.select_arrowIcon {
  fill: var(--color-text-secondary);
  width: 16px;
  height: 16px;
}
.select_select:hover .select_arrowIcon {
  fill: var(--color-text);
}
.select_popup {
  padding: 6px 0;
}
.select_option {
  padding: 6px 12px;
  font-size: 14px;
  min-width: 60px;
  cursor: pointer;
}
.select_option + .select_option {
  margin-top: 4px;
}
.select_option.select_isActive {
  background-color: var(--color-action);
}
.select_option:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.select_option.select_isActive:hover {
  background-color: var(--color-action);
}

/* src/components/popup/popup.module.css */
.popup_popup {
  position: fixed;
  background-color: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  opacity: 1;
  transition: transform 0.1s ease-in-out, opacity 0.1s linear;
  z-index: 10;
}
.popup_hiddenPopup {
  transform: scale(0.5, 0.5);
  opacity: 0;
}
.popup_popup.popup_top {
  transform-origin: 50% 100%;
}
.popup_popup.popup_top-left {
  transform-origin: 0 100%;
}
.popup_popup.popup_top-right {
  transform-origin: 100% 100%;
}
.popup_popup.popup_bottom {
  transform-origin: 50% 0;
}
.popup_popup.popup_bottom-left {
  transform-origin: 0 0;
}
.popup_popup.popup_bottom-right {
  transform-origin: 100% 0;
}
.popup_popup.popup_left {
  transform-origin: 100% 50%;
}
.popup_popup.popup_left-top {
  transform-origin: 100% 0;
}
.popup_popup.popup_left-bottom {
  transform-origin: 100% 100%;
}
.popup_popup.popup_right {
  transform-origin: 0 50%;
}
.popup_popup.popup_right-top {
  transform-origin: 0 0;
}
.popup_popup.popup_right-bottom {
  transform-origin: 0 100%;
}

/* src/components/lang-switcher/lang-switcher.module.css */
.lang_switcher_switcher {
  width: fit-content;
}

/* src/components/header/header.module.css */
.header_root {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--header-height);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.header_root.header_home {
  justify-content: flex-end;
}
.header_homeLink {
  width: 32px;
  height: 32px;
  padding: 6px;
  box-sizing: border-box;
  margin-left: -6px;
  margin-right: auto;
}
.header_homeSvg {
  margin-top: -1px;
  width: 20px;
  height: 20px;
  fill: var(--color-action);
}
.header_homeLink:hover .header_homeSvg {
  fill: var(--color-action-hover);
}
.header_routeName {
  font-size: 20px;
}
.header_profileLink {
  width: 32px;
  height: 32px;
  padding: 6px;
  box-sizing: border-box;
  margin-left: 12px;
}
.header_profileSvg {
  margin-top: -1px;
  width: 20px;
  height: 20px;
  fill: var(--color-action);
}
.header_profileLink:hover .header_profileSvg {
  fill: var(--color-action-hover);
}

/* src/components/input/input.module.css */
.input_root {
  display: block;
  width: 100%;
  outline: 0;
  margin: 0;
  font-size: var(--font-size-main);
  color: var(--color-text);
  padding: 8px;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  line-height: 22px;
  min-height: 40px;
}
.input_root:focus {
  border: 1px solid var(--color-action);
}

/* src/components/form/form.module.css */
.form_formInput {
  margin-top: 16px;
}
.form_fieldLabel {
  margin-bottom: 4px;
  color: var(--color-text-secondary);
}
.form_formSubmit {
  margin-top: 24px;
}
.form_formSubmit + .form_formSubmit {
  margin-top: 12px;
}
.form_formSubmit .form_submitBtn {
  width: 100%;
  height: 44px;
}

/* src/components/button/button.module.css */
.button_root {
  box-sizing: border-box;
  border-radius: 0;
  text-decoration: none;
  padding: 0 20px;
  height: 36px;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  border: 2px solid var(--color-action);
  cursor: pointer;
  font-weight: 500;
  font-size: 17px;
}
.button_root:hover {
  border: 2px solid var(--color-action-hover);
}
.button_style_action {
  border: 2px solid var(--color-action);
  background-color: var(--color-action);
  color: var(--color-text-action);
}
.button_style_action:hover {
  border: 2px solid var(--color-action-hover);
  background-color: var(--color-action-hover);
  color: var(--color-text-action-hover);
}
.button_style_danger {
  border: 2px solid var(--color-danger);
  background-color: var(--color-danger);
  color: var(--color-text-action);
}
.button_style_danger:hover {
  border: 2px solid var(--color-danger-hover);
  background-color: var(--color-danger-hover);
  color: var(--color-text-action-hover);
}
.button_style_outline {
  border: 2px solid var(--color-action);
  color: var(--color-text);
}
.button_style_outline:hover {
  color: var(--color-text-hover);
  border: 2px solid var(--color-action-hover);
}

/* src/components/checkbox/checkbox.module.css */
.checkbox_checkbox {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.1s linear;
}
.checkbox_check {
  position: absolute;
  left: -2px;
  top: -2px;
  stroke: var(--color-text-action);
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: scale(0.2);
  transition: opacity 0.1s linear, transform 0.1s linear;
}
.checkbox_checkbox:hover {
  border: 2px solid var(--color-action);
}
.checkbox_checkbox.checkbox_checked {
  border: 2px solid var(--color-action);
  background-color: var(--color-action);
}
.checkbox_checkbox.checkbox_checked .checkbox_check {
  opacity: 1;
  transform: scale(1);
}
.checkbox_checkboxText {
  display: flex;
  line-height: 20px;
  cursor: pointer;
}
.checkbox_checkboxText .checkbox_checkbox {
  min-width: 20px;
  margin-right: 8px;
}
.checkbox_checkboxText:hover .checkbox_checkbox {
  border: 2px solid var(--color-action);
}

/* src/components/registration/registration.module.css */
.registration_root {
  position: absolute;
  inset: 0;
}
.registration_content {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
.registration_page {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 360px;
  width: 100%;
  padding: 0 16px;
}
@media (max-width: 440px) {
  .registration_page {
    max-width: 100%;
  }
}
.registration_title {
  font-size: 22px;
  margin-bottom: 20px;
}
.registration_termsOfUse {
  margin-top: 20px;
  font-size: 14px;
}

/* src/components/change-password/change-password.module.css */
.change_password_content {
  position: absolute;
  inset: 0;
  overflow: auto;
}
.change_password_page {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 360px;
  width: 100%;
  padding: 16px;
}
@media (max-width: 440px) {
  .change_password_page {
    max-width: 100%;
  }
}
.change_password_title {
  font-size: 22px;
  margin-bottom: 20px;
}

/* src/components/layout/layout.module.css */
.layout_layout {
  position: absolute;
  inset: 0;
  --navigation-height: 48px;
}
.layout_navigation {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--navigation-height);
  border-bottom: 1px solid var(--color-border);
}
.layout_content {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--navigation-height);
  bottom: 0;
}
@media (max-width: 560px) {
  .layout_layout {
    --navigation-height: 80px;
  }
  .layout_navigation {
    bottom: 0;
    top: auto;
    border-bottom: 0;
    border-top: 1px solid var(--color-border);
  }
  .layout_content {
    top: 0;
    bottom: var(--navigation-height);
  }
}

/* src/components/navigation/navigation.module.css */
.navigation_content {
  box-sizing: border-box;
  height: 100%;
  padding: 0 8px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.navigation_tab {
  box-sizing: border-box;
  text-decoration: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  gap: 8px;
}
.navigation_tabIcon {
  width: 20px;
  height: 20px;
  fill: var(--color-text-secondary);
}
.navigation_tabIcon.navigation_statistics,
.navigation_tabIcon.navigation_settings {
  stroke: var(--color-text-secondary);
  fill: none;
}
.navigation_tab.navigation_isActive {
  color: var(--color-text);
  border-bottom: 2px solid var(--color-action);
}
.navigation_tab.navigation_isActive .navigation_tabIcon {
  fill: var(--color-text);
}
.navigation_tab.navigation_isActive .navigation_tabIcon.navigation_statistics,
.navigation_tab.navigation_isActive .navigation_tabIcon.navigation_settings {
  stroke: var(--color-text);
  fill: none;
}
.navigation_tab:hover {
  color: var(--color-text);
}
.navigation_tab:hover .navigation_tabIcon {
  fill: var(--color-text);
}
.navigation_tab:hover .navigation_tabIcon.navigation_statistics,
.navigation_tab:hover .navigation_tabIcon.navigation_settings {
  stroke: var(--color-text);
  fill: none;
}
@media (max-width: 560px) {
  .navigation_content {
    width: 100%;
    justify-content: stretch;
  }
  .navigation_tab {
    flex-basis: 25%;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    padding: 0 0 16px;
  }
  .navigation_tab.navigation_isActive {
    border-bottom: 2px solid transparent;
    border-top: 2px solid var(--color-action);
  }
}

/* src/components/forget-password/forget-password.module.css */
.forget_password_root {
  position: absolute;
  inset: 0;
}
.forget_password_content {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
.forget_password_page {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 360px;
  width: 100%;
  padding: 0 16px;
}
@media (max-width: 440px) {
  .forget_password_page {
    max-width: 100%;
  }
}
.forget_password_title {
  font-size: 22px;
  margin-bottom: 20px;
}
.forget_password_forgetPassword {
  margin-top: 16px;
}

/* src/components/reset-password/reset-password.module.css */
.reset_password_root {
  position: absolute;
  inset: 0;
}
.reset_password_content {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
.reset_password_page {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 360px;
  width: 100%;
  padding: 0 16px;
}
@media (max-width: 440px) {
  .reset_password_page {
    max-width: 100%;
  }
}
.reset_password_title {
  font-size: 22px;
  margin-bottom: 20px;
}

/* src/components/welcome-page/welcome-page.module.css */
.welcome_page_root {
  position: absolute;
  inset: 0;
}
.welcome_page_header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--header-height);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.welcome_page_content {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
}
.welcome_page_logo {
  width: 30vh;
  height: 30vh;
  position: relative;
}
.welcome_page_logoSvg {
  position: absolute;
  inset: 0;
  fill: var(--color-action);
}
.welcome_page_title {
  margin: -1vh 0 0;
  padding: 0;
  font-size: 7vh;
  font-family:
    "Times New Roman",
    Times,
    serif;
}
.welcome_page_caption {
  font-size: 4vh;
  margin-top: 1vh;
  text-align: center;
  font-weight: 300;
}
.welcome_page_description {
  margin-top: 2vh;
  max-width: 60vh;
  text-align: center;
  font-size: 2.5vh;
  font-weight: 250;
}
.welcome_page_buttons {
  margin-top: 3vh;
  display: flex;
  gap: 8px;
}

/* src/components/profile/profile.module.css */
.profile_content {
  position: absolute;
  inset: 0;
  overflow: auto;
}
.profile_page {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 360px;
  width: 100%;
  padding: 16px;
}
@media (max-width: 440px) {
  .profile_page {
    max-width: 100%;
  }
}
.profile_title {
  font-size: 22px;
  margin-bottom: 16px;
}
.profile_line {
  margin-top: 8px;
}
.profile_prop {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* src/components/home/home.module.css */
.home_content {
  position: absolute;
  inset: 0;
}

/* src/components/naps/naps.module.css */
.naps_root {
  opacity: 0;
  transition: opacity 0.2s linear;
  --active-day-height: 128px;
}
.naps_napsActiveDay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--active-day-height);
  overflow: auto;
}
.naps_activeDay {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 360px;
}
@media (max-width: 440px) {
  .naps_activeDay {
    max-width: 100%;
  }
}
.naps_napsList {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--active-day-height);
  bottom: 0;
  border-top: 1px solid var(--color-border);
  overflow: auto;
}
.naps_content {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 360px;
  position: relative;
  padding: 0 16px 16px;
}
@media (max-width: 440px) {
  .naps_content {
    max-width: 100%;
  }
}
.naps_footer {
  display: flex;
}
.naps_createNapBtn {
  flex-basis: 100%;
  height: 44px;
}
.naps_optionsBtn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 8px;
}
.naps_optionsButtonSvg {
  width: 18px;
  height: 18px;
  fill: var(--color-text);
}
.naps_napEvent {
  box-sizing: border-box;
  position: relative;
  height: 64px;
}
.naps_napEventTime {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  font-size: 16px;
  font-weight: 600;
  text-align: right;
  line-height: 28px;
}
.naps_napEventTitle {
  position: absolute;
  top: 0;
  left: 110px;
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  text-decoration: none;
}
.naps_napEventTitle:hover {
  text-decoration: underline;
}
.naps_napEventDuration {
  position: absolute;
  top: 28px;
  right: 0;
  left: 110px;
  line-height: 24px;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.naps_napEventPointer {
  position: absolute;
  top: 6px;
  left: 72px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: var(--color-border);
  z-index: 2;
}
.naps_napEventLine {
  position: absolute;
  top: 0;
  left: 79px;
  width: 2px;
  height: 64px;
  background-color: var(--color-border);
}
.naps_napEventDayStart {
  position: sticky;
  top: 0;
  width: 81px;
  background-color: var(--color-bg-main);
  z-index: 1;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--color-border);
}
.naps_napEventDayStartText {
  margin-left: -16px;
  margin-right: 8px;
  margin-bottom: -2px;
  font-size: 16px;
  font-weight: 600;
  line-height: 32px;
  border-bottom: 2px solid var(--color-border);
  background-color: var(--color-bg-main);
  text-align: center;
}
.naps_optionsPopup {
  padding: 8px 0;
}
.naps_menuItem {
  padding: 8px 12px;
  cursor: pointer;
}
.naps_menuItem + .naps_menuItem {
  margin-top: 2px;
}
.naps_menuItem:hover {
  background-color: var(--color-border);
}

/* src/components/active-day/active-day.module.css */
.active_day_root {
  box-sizing: border-box;
  padding: 12px 16px;
  position: relative;
}
.active_day_dataRow {
  line-height: 20px;
}
.active_day_dataRow + .active_day_dataRow {
  margin-top: 4px;
}
.active_day_dateTitle {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}
.active_day_content {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
}
.active_day_dataBlock {
  width: 35%;
}
.active_day_dataBlock.active_day_nightSplitBlock {
  width: 30%;
}
.active_day_dataTitle {
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-secondary);
}
.active_day_dataValue {
  font-size: 16px;
  line-height: 20px;
}

/* src/components/login/login.module.css */
.login_root {
  position: absolute;
  inset: 0;
}
.login_content {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
.login_page {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 360px;
  width: 100%;
  padding: 0 16px;
}
@media (max-width: 440px) {
  .login_page {
    max-width: 100%;
  }
}
.login_title {
  font-size: 22px;
  margin-bottom: 20px;
}
.login_forgetPassword {
  margin-top: 16px;
}
.login_forgetPasswordLink {
  color: var(--color-text-secondary);
  font-size: 14px;
}

/* src/components/update-event/update-event.module.css */
.update_event_content {
  position: absolute;
  inset: 0;
  overflow: auto;
}
.update_event_page {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 360px;
  width: 100%;
  padding: 16px;
  min-height: 520px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
@media (max-width: 440px) {
  .update_event_page {
    max-width: 100%;
  }
}
.update_event_title {
  text-align: center;
  font-size: 22px;
  margin-bottom: 20px;
}
.update_event_formSubmit {
  display: block;
}

/* src/components/time-picker/time-picker.module.css */
.time_picker_picker {
  box-sizing: border-box;
  height: 240px;
}
.time_picker_dayPicker {
  width: 140px;
}
.time_picker_hoursPicker {
  width: 80px;
}
.time_picker_minutesPicker {
  width: 80px;
}
.time_picker_dateValue {
  display: flex;
  align-items: center;
  justify-content: center;
}
.time_picker_dateValueText {
  padding: 6px;
  font-size: 26px;
  line-height: 32px;
  cursor: pointer;
}
.time_picker_dayPicker .time_picker_dateValueText {
  font-size: 22px;
}
.time_picker_hoursPicker .time_picker_dateValueText {
  padding-left: 12px;
}
.time_picker_minutesPicker .time_picker_dateValueText {
  padding-right: 12px;
}
.time_picker_timePicker {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.time_picker_clock {
  position: relative;
  width: 3px;
  height: 12px;
}
.time_picker_dotTop,
.time_picker_dotBottom {
  position: absolute;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 3px;
  background-color: var(--color-text);
}
.time_picker_dotTop {
  top: 2px;
}
.time_picker_dotBottom {
  bottom: 0;
}
.time_picker_border {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 23px);
  height: 46px;
  border-radius: 6px;
  border: 2px solid var(--color-border);
}

/* src/components/scrolling/infinite-scroll.module.css */
.infinite_scroll_container {
  position: relative;
  overflow: hidden;
  --scrollbar-overflow: 20px;
  --neg-scrollbar-overflow: -20px;
  --scrollable-size: 20000px;
}
.infinite_scroll_scrollArea {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  overflow: auto;
}
.infinite_scroll_container.infinite_scroll_vertical.infinite_scroll_snappingEnabled .infinite_scroll_scrollArea {
  scroll-snap-type: y mandatory;
}
.infinite_scroll_container.infinite_scroll_horizontal.infinite_scroll_snappingEnabled .infinite_scroll_scrollArea {
  scroll-snap-type: x mandatory;
}
.infinite_scroll_container.infinite_scroll_scalingEnabled .infinite_scroll_scrollArea {
  overscroll-behavior-x: contain;
  overscroll-behavior-y: contain;
}
.infinite_scroll_container.infinite_scroll_vertical .infinite_scroll_scrollArea {
  bottom: 0;
  right: var(--neg-scrollbar-overflow);
  flex-direction: column;
}
.infinite_scroll_container.infinite_scroll_horizontal .infinite_scroll_scrollArea {
  bottom: var(--neg-scrollbar-overflow);
  flex-direction: row;
  right: 0;
}
.infinite_scroll_container.infinite_scroll_vertical .infinite_scroll_scrollable {
  position: relative;
  width: 100%;
  min-height: var(--scrollable-size);
}
.infinite_scroll_container.infinite_scroll_horizontal .infinite_scroll_scrollable {
  position: relative;
  min-width: var(--scrollable-size);
  height: 100%;
}
.infinite_scroll_content {
  position: sticky;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.infinite_scroll_container.infinite_scroll_vertical .infinite_scroll_content {
  width: calc(100% - var(--scrollbar-overflow));
  height: 100%;
  min-height: 100%;
}
.infinite_scroll_container.infinite_scroll_horizontal .infinite_scroll_content {
  height: calc(100% - var(--scrollbar-overflow));
  width: 100%;
  min-width: 100%;
}
.infinite_scroll_snapTarget {
  scroll-snap-align: center;
  box-sizing: border-box;
  position: absolute;
}
.infinite_scroll_container.infinite_scroll_vertical .infinite_scroll_snapTarget {
  left: 0;
  right: 0;
}
.infinite_scroll_container.infinite_scroll_horizontal .infinite_scroll_snapTarget {
  top: 0;
  bottom: 0;
}
.infinite_scroll_itemsContainer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.infinite_scroll_item {
  box-sizing: border-box;
  position: absolute;
}
.infinite_scroll_container.infinite_scroll_vertical .infinite_scroll_item {
  left: 0;
  right: 0;
}
.infinite_scroll_container.infinite_scroll_horizontal .infinite_scroll_item {
  top: 0;
  bottom: 0;
}

/* src/components/terms-of-use/terms-of-use.module.css */
.terms_of_use_root {
  position: absolute;
  inset: 0;
}
.terms_of_use_content {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
.terms_of_use_page {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
  padding: 0 16px 16px;
}
.terms_of_use_title {
  font-size: 22px;
  margin-bottom: 16px;
}

/* src/components/terms-of-use/content.module.css */
.content_content {
  font-weight: 300;
}
.content_subtitle {
  font-size: 20px;
  font-weight: 400;
}
.content_link {
  color: var(--color-text);
}

/* src/components/privacy-policy/privacy-policy.module.css */
.privacy_policy_root {
  position: absolute;
  inset: 0;
}
.privacy_policy_content {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
.privacy_policy_page {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
  padding: 0 16px 16px;
}
.privacy_policy_title {
  font-size: 22px;
  margin-bottom: 16px;
}

/* src/components/privacy-policy/content.module.css */
.content_content2 {
  font-weight: 300;
}
.content_subtitle2 {
  font-size: 20px;
  font-weight: 400;
}
.content_link2 {
  color: var(--color-text);
}

/* src/components/create-event/create-event.module.css */
.create_event_content {
  position: absolute;
  inset: 0;
  overflow: auto;
}
.create_event_page {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 360px;
  width: 100%;
  padding: 16px;
  min-height: 500px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
@media (max-width: 440px) {
  .create_event_page {
    max-width: 100%;
  }
}
.create_event_title {
  text-align: center;
  font-size: 22px;
  margin-bottom: 20px;
}
.create_event_formSubmit {
  display: block;
}

/* src/components/test-page/test-page.module.css */
.test_page_root {
  position: absolute;
  inset: 0;
}
.test_page_content {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
}
.test_page_container {
  box-sizing: border-box;
  position: relative;
  width: 500px;
  height: 500px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 16px);
  margin: 0 auto;
  border: 1px solid yellow;
}
.test_page_scroll {
  width: 100%;
  height: 100%;
}
.test_page_values {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  bottom: 0;
}
.test_page_item {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

/* src/components/scroll-content/scroll-content.module.css */
.scroll_content_root {
  position: relative;
}
.scroll_content_container {
  position: absolute;
  inset: 0;
  overflow: auto;
}
.scroll_content_scrollable {
  position: relative;
}
.scroll_content_root.scroll_content_vertical .scroll_content_scrollable {
  height: 20000px;
}
.scroll_content_root.scroll_content_horizontal .scroll_content_scrollable {
  width: 20000px;
}
.scroll_content_staticContent {
  position: sticky;
}
.scroll_content_root.scroll_content_vertical .scroll_content_staticContent {
  top: 0;
}
.scroll_content_root.scroll_content_horizontal .scroll_content_staticContent {
  left: 0;
}

/* src/components/settings-page/settings-page.module.css */
.settings_page_content {
  position: absolute;
  inset: 0;
  overflow: auto;
}
.settings_page_page {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 360px;
  width: 100%;
  padding: 16px;
}
@media (max-width: 440px) {
  .settings_page_page {
    max-width: 100%;
  }
}
.settings_page_title {
  font-size: 22px;
  margin-bottom: 16px;
}
.settings_page_line {
  margin-top: 12px;
}
.settings_page_prop {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* src/components/statistics-page/statistics-page.module.css */
.statistics_page_content {
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.2s linear;
  --sidebar-width: 60px;
}
.statistics_page_header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  padding: 0 16px;
  align-items: center;
  gap: 8px;
}
.statistics_page_link {
  text-decoration: none;
  line-height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--color-text-secondary);
  border: 2px solid var(--color-action);
}
.statistics_page_link:hover {
  color: var(--color-text);
}
.statistics_page_link.statistics_page_isActive {
  color: var(--color-text);
  background-color: var(--color-action);
}

/* src/components/naps-chart/naps-chart.module.css */
.naps_chart_sidebar {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  border-right: 1px solid var(--color-border);
}
.naps_chart_hourMark {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.naps_chart_hourLine {
  position: absolute;
  left: var(--sidebar-width);
  right: 0;
  height: 1px;
  background-color: var(--color-border);
}
.naps_chart_timeline {
  position: absolute;
  left: var(--sidebar-width);
  right: 0;
  top: 0;
  bottom: 0;
}
.naps_chart_day {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
}
.naps_chart_dayHeader {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-align: center;
  padding: 0 4px;
}
.naps_chart_dayNap {
  position: absolute;
  border-radius: 4px;
  background-color: var(--color-action);
}
.naps_chart_dayNap.naps_chart_dayStart {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.naps_chart_dayNap.naps_chart_dayEnd {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* src/components/stat-chart/stat-chart.module.css */
.stat_chart_root {
  position: absolute;
  inset: 0;
  --header-height: 50px;
  --footer-height: 50px;
  --sidebar-width: 60px;
}
@media (max-width: 560px) {
  .stat_chart_root {
    --footer-height: 80px;
  }
}
.stat_chart_header {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--header-height);
  border-bottom: 1px solid var(--color-border);
}
.stat_chart_dayHeader {
  position: absolute;
  top: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-align: center;
  padding: 0 4px;
}
.stat_chart_footer {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-height);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 16px;
}
@media (max-width: 560px) {
  .stat_chart_footer {
    flex-wrap: wrap;
    padding: 12px 0;
  }
}
.stat_chart_chartContent {
  position: absolute;
  left: var(--sidebar-width);
  right: 0;
  top: var(--header-height);
  bottom: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat_chart_sidebar {
  position: absolute;
  left: 0;
  top: var(--header-height);
  bottom: var(--footer-height);
  width: var(--sidebar-width);
  border-right: 1px solid var(--color-border);
}
.stat_chart_durationTime {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 20px;
  color: var(--color-text-secondary);
}
.stat_chart_canvas {
  position: absolute;
  left: 0;
  top: 0;
}
.stat_chart_colorCaption {
  font-weight: 500;
  text-align: center;
}
@media (max-width: 560px) {
  .stat_chart_colorCaption {
    flex-basis: 40%;
  }
}

/* src/components/modal/modal.module.css */
.modal_root {
  position: fixed;
  inset: 0;
  overflow: auto;
  transition: opacity 0.15s ease-out;
  opacity: 1;
  z-index: 300;
}
.modal_root.modal_hidden {
  opacity: 0;
}
.modal_wrapper {
  box-sizing: border-box;
  padding: 16px;
  min-height: 100%;
  min-width: 100%;
  height: fit-content;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-bg-overlay);
}
.modal_modal {
  box-sizing: border-box;
  position: relative;
  background-color: var(--color-bg-main);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  width: fit-content;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--color-border);
  transition: transform 0.15s ease-out;
  transform-origin: 50%;
}
.modal_root.modal_hidden .modal_modal {
  transform: scale(0.97, 0.97);
}

/* src/components/export-to-json/export-to-json.module.css */
.export_to_json_modal {
  width: 460px;
  padding: 16px;
}
.export_to_json_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.export_to_json_closeBtn {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 6px;
  cursor: pointer;
  margin-right: -6px;
}
.export_to_json_closeIcon {
  width: 20px;
  height: 20px;
  fill: var(--color-text);
}
.export_to_json_title {
  font-size: 18px;
}
.export_to_json_form {
  display: flex;
  margin-top: 16px;
  gap: 16px;
}
.export_to_json_formPart {
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.export_to_json_formTitle {
  margin-bottom: 8px;
}
.export_to_json_datePicker {
  width: 100%;
}
.export_to_json_submit {
  display: flex;
  justify-content: center;
}

/* src/components/import-from-json/import-from-json.module.css */
.import_from_json_modal {
  width: 460px;
  padding: 16px;
}
.import_from_json_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.import_from_json_closeBtn {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 6px;
  cursor: pointer;
  margin-right: -6px;
}
.import_from_json_closeIcon {
  width: 20px;
  height: 20px;
  fill: var(--color-text);
}
.import_from_json_dropFile {
  margin-top: 12px;
}
.import_from_json_errorMessage {
  margin-top: 12px;
}

/* src/components/drop-file/drop-file.module.css */
.drop_file_dropFile {
  height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.drop_file_dropFile.drop_file_isDragging {
  background-color: var(--color-border);
}
.drop_file_fileIcon {
  width: 50px;
  height: 50px;
  stroke: var(--color-border);
}
.drop_file_dropFile.drop_file_isDragging .drop_file_fileIcon {
  stroke: var(--color-text-secondary);
}
.drop_file_caption {
  margin: 12px 0 16px;
  color: var(--color-text-secondary);
}
.drop_file_input {
  position: absolute;
  left: -1000px;
  top: -1000px;
}

/* src/components/confirm-modal/confirm-modal.module.css */
.confirm_modal_modal {
  width: 360px;
  padding: 16px;
}
.confirm_modal_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.confirm_modal_closeBtn {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 6px;
  cursor: pointer;
  margin-right: -6px;
}
.confirm_modal_closeIcon {
  width: 20px;
  height: 20px;
  fill: var(--color-text);
}
.confirm_modal_title {
  font-size: 18px;
}
.confirm_modal_footer {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.confirm_modal_button {
  width: 100%;
  height: 44px;
}

/* src/components/events-list-page/events-list-page.module.css */
.events_list_page_content {
  position: absolute;
  inset: 0;
  --active-day-height: 128px;
}
.events_list_page_activeDayContainer {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--active-day-height);
  overflow: auto;
  background-color: var(--color-bg-main);
  border-bottom: 1px solid var(--color-border);
}
.events_list_page_activeDay {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 360px;
}
@media (max-width: 440px) {
  .events_list_page_activeDay {
    max-width: 100%;
  }
}
.events_list_page_eventsListContainer {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--active-day-height);
  bottom: 0;
}
.events_list_page_footer {
  box-sizing: border-box;
  position: absolute;
  width: 360px;
  display: flex;
  padding: 0 16px;
  opacity: 0;
  translate: opacity 0.1s linear;
  left: calc(50% - 180px);
}
@media (max-width: 440px) {
  .events_list_page_footer {
    left: 0;
    width: 100%;
  }
}
.events_list_page_createNapBtn {
  flex-basis: 100%;
  height: 44px;
}
.events_list_page_optionsBtn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 8px;
}
.events_list_page_optionsButtonSvg {
  width: 18px;
  height: 18px;
  fill: var(--color-text);
}
.events_list_page_optionsPopup {
  padding: 8px 0;
}
.events_list_page_menuItem {
  padding: 8px 12px;
  cursor: pointer;
}
.events_list_page_menuItem + .events_list_page_menuItem {
  margin-top: 2px;
}
.events_list_page_menuItem:hover {
  background-color: var(--color-border);
}
.events_list_page_napEvent {
  position: absolute;
  width: 360px;
  left: calc(50% - 180px);
  height: 64px;
}
@media (max-width: 440px) {
  .events_list_page_napEvent {
    left: 0;
    width: 100%;
  }
}
.events_list_page_dayStart {
  box-sizing: border-box;
  position: absolute;
  left: calc(50% - 180px);
  height: 32px;
  line-height: 32px;
  text-align: center;
  width: 109px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-main);
}
@media (max-width: 440px) {
  .events_list_page_dayStart {
    left: 0;
  }
}
.events_list_page_sideLine {
  position: absolute;
  top: 0;
  left: calc(50% - 180px + 109px);
  width: 2px;
  background-color: var(--color-border);
  max-height: 20000px;
}
@media (max-width: 440px) {
  .events_list_page_sideLine {
    left: 109px;
  }
}
.events_list_page_napEventTime {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 15px;
  width: 80px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.events_list_page_napEventTime:hover {
  text-decoration: underline;
}
.events_list_page_napEventTitle {
  position: absolute;
  left: 140px;
  top: 0;
  height: 28px;
  line-height: 28px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.events_list_page_napEventTitle:hover {
  text-decoration: underline;
}
.events_list_page_napEventDuration {
  position: absolute;
  top: 28px;
  right: 0;
  left: 140px;
  line-height: 24px;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.events_list_page_napEventDot {
  position: absolute;
  left: calc(50% - 180px + 103px);
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background-color: var(--color-border);
}
@media (max-width: 440px) {
  .events_list_page_napEventDot {
    left: 103px;
  }
}