/* line 214, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-heading-4xl {
  font-size: 36px !important;
  line-height: 48px !important;
  letter-spacing: 0% !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
  color: var(--color-neutral-text-primary) !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
}

/* line 224, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-heading-3xl {
  font-size: 30px !important;
  line-height: 40px !important;
  letter-spacing: 0% !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
  color: var(--color-neutral-text-primary) !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
}

/* line 234, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-heading-2xl {
  font-size: 24px !important;
  line-height: 32px !important;
  letter-spacing: 0% !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
  color: var(--color-neutral-text-primary) !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
}

/* line 244, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-heading-xl {
  font-size: 24px !important;
  line-height: 32px !important;
  letter-spacing: 0% !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
  color: var(--color-neutral-text-primary) !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
}

/* line 254, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-heading-l {
  font-size: 20px !important;
  line-height: 28px !important;
  letter-spacing: 0% !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
  color: var(--color-neutral-text-primary) !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
}

/* line 264, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-heading-m {
  font-size: 18px !important;
  line-height: 24px !important;
  letter-spacing: 0% !important;
  font-weight: 600 !important;
  vertical-align: middle !important;
  color: var(--color-neutral-text-primary) !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
}

/* line 274, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-heading-s {
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0% !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
  color: var(--color-neutral-text-primary) !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
}

/* line 284, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-heading-xs {
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 1% !important;
  font-weight: 600 !important;
  vertical-align: middle !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
}

/* line 293, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-heading-2xs {
  font-size: 12px !important;
  line-height: 16px !important;
  letter-spacing: 1.5% !important;
  font-weight: 600 !important;
  vertical-align: middle !important;
  font-family: 'Poppins', 'Roboto', sans-serif !important;
}

/* line 303, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-body-s {
  font-size: 10px !important;
  line-height: 16px !important;
  letter-spacing: 0% !important;
  font-weight: 400 !important;
  font-family: "Poppins", "Roboto", sans-serif !important;
}

/* line 311, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-body-m {
  font-size: 12px !important;
  line-height: 18px !important;
  letter-spacing: 0% !important;
  font-weight: 400 !important;
  font-family: "Poppins", "Roboto", sans-serif !important;
}

/* line 319, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-body-l {
  font-size: 16px !important;
  line-height: 22px !important;
  letter-spacing: 0% !important;
  font-weight: 400 !important;
  vertical-align: middle !important;
  font-family: "Poppins", "Roboto", sans-serif !important;
}

/* line 329, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-caption {
  font-size: 10px !important;
  line-height: 16px !important;
  letter-spacing: 0% !important;
  font-weight: 400 !important;
  font-family: "Poppins", "Roboto", sans-serif !important;
}

/* line 338, app/assets/stylesheets/users/../design-system/_typography.scss */
.web-overline {
  font-size: 10px !important;
  line-height: 16px !important;
  letter-spacing: 0% !important;
  font-weight: 400 !important;
  font-family: "Poppins", "Roboto", sans-serif !important;
  text-transform: uppercase !important;
}

/* line 223, app/assets/stylesheets/users/../design-system/_themes.scss */
:root {
  --color-neutral-text-primary: #101010;
  --color-neutral-text-secondary: #646464;
  --color-neutral-text-disable: #A3A3A3;
  --color-neutral-text-active: #ffffff;
  --color-neutral-bg-primary: #ffffff;
  --color-neutral-bg-secondary: #F5F5F5;
  --color-neutral-bg-tertiary: #EBEBEB;
  --color-neutral-bg-disable: #DCDCDC;
  --color-neutral-bg-active: #101010;
  --color-neutral-border-primary: #C1C1C1;
  --color-neutral-border-secondary: #DCDCDC;
  --color-neutral-hover-bg-primary: #F5F5F5;
  --color-neutral-hover-bg-secondary: #EBEBEB;
  --color-neutral-hover-bg-tertiary: #DCDCDC;
  --color-neutral-hover-bg-cross-white-tertiary: #DCDCDC;
  --color-main-text-primary: #006654;
  --color-main-bg-primary: #006654;
  --color-main-bg-secondary: #ADE9E2;
  --color-main-bg-active: #006654;
  --color-main-hover-bg-primary: #005C46;
  --color-main-border: #006654;
  --color-main-brand: #00A391;
  --color-complementary-text-primary: #1D3249;
  --color-complementary-bg-primary: #304664;
  --color-complementary-bg-secondary: #F1F2FA;
  --color-complementary-hover-bg-primary: #1D3249;
  --color-complementary-border: #304664;
  --color-complementary-brand: #5D7A9C;
  --color-success-text-primary: #448325;
  --color-success-bg-primary: #448325;
  --color-success-bg-secondary: #D7F1C7;
  --color-success-hover-bg-primary: #2e5e17;
  --color-success-border: #448325;
  --color-warning-text-primary: #A68107;
  --color-warning-bg-primary: #A68107;
  --color-warning-bg-secondary: #FEEDB4;
  --color-warning-hover-bg-primary: #7F6305;
  --color-warning-border: #A68107;
  --color-error-text-primary: #E81C24;
  --color-error-bg-primary: #DA0707;
  --color-error-bg-secondary: #FFD1D1;
  --color-error-hover-bg-primary: #BE0F0F;
  --color-error-border: #DA0707;
  --color-informative-text-primary: #077CC0;
  --color-informative-bg-primary: #077CC0;
  --color-informative-bg-secondary: #B2EAFF;
  --color-informative-hover-bg-primary: #005993;
  --color-informative-border: #077CC0;
  --color-opacity-black-weakest: #10101026;
  --color-opacity-black-weak: #1010104d;
  --color-opacity-black-medium: #10101080;
  --color-opacity-black-strong: #101010b3;
  --color-opacity-black-strongest: #101010d9;
  --color-shadow-subtle: #1010100f;
  --color-shadow-elevated: #1010101a;
  --color-shadow-prominent: #1010102e;
  --color-shadow-scrim: #10101066;
  --shadow-elevation-header: 0 1px 3px var(--color-shadow-subtle);
  --shadow-elevation-panel: 0 8px 24px var(--color-shadow-elevated);
  --shadow-elevation-panel-prominent: 0 8px 24px var(--color-shadow-prominent);
  --shadow-elevation-drawer: -4px 0 24px var(--color-shadow-elevated);
  --shadow-elevation-modal: 0 16px 48px var(--color-shadow-prominent);
  --color-neutral-shadow-sm: var(--color-shadow-subtle);
  --color-neutral-shadow-md: var(--color-shadow-elevated);
  --color-neutral-shadow-lg: var(--color-shadow-prominent);
  --color-neutral-text-cross-white-primary: #ffffff;
  --color-neutral-text-cross-white-secondary: #c1c1c1;
  --color-neutral-bg-cross-white-primary: #ffffff;
  --color-neutral-bg-cross-white-secondary: #F5F5F5;
  --color-neutral-bg-cross-main-primary: #101010;
  --color-neutral-bg-cross-main-secondary: #1b1b1b;
  --color-avatar-bg-1: #253C75;
  --color-avatar-bg-2: #448325;
  --color-avatar-bg-3: #63BE36;
  --color-avatar-bg-4: #F89C1B;
  --color-avatar-bg-5: #E81C24;
  --color-analogous-bg-primary: #3F1F63;
  --color-analogous-bg-secondary: #DEC1FF;
}

/* line 230, app/assets/stylesheets/users/../design-system/_themes.scss */
.dark,
[data-theme="dark"] {
  --color-neutral-text-primary: #ffffff;
  --color-neutral-text-secondary: #c1c1c1;
  --color-neutral-text-disable: #858585;
  --color-neutral-text-active: #101010;
  --color-neutral-bg-primary: #101010;
  --color-neutral-bg-secondary: #1b1b1b;
  --color-neutral-bg-tertiary: #282828;
  --color-neutral-bg-disable: #464646;
  --color-neutral-bg-active: #ffffff;
  --color-neutral-border-primary: #464646;
  --color-neutral-border-secondary: #333333;
  --color-neutral-hover-bg-primary: #1b1b1b;
  --color-neutral-hover-bg-secondary: #282828;
  --color-neutral-hover-bg-tertiary: #464646;
  --color-neutral-hover-bg-cross-white-tertiary: #DCDCDC;
  --color-main-text-primary: #71DCD0;
  --color-main-bg-primary: #006654;
  --color-main-bg-secondary: #003327;
  --color-main-bg-active: #006654;
  --color-main-hover-bg-primary: #005C46;
  --color-main-border: #006654;
  --color-main-brand: #00A391;
  --color-complementary-text-primary: #E3E9F6;
  --color-complementary-bg-primary: #304664;
  --color-complementary-bg-secondary: #17283A;
  --color-complementary-hover-bg-primary: #1D3249;
  --color-complementary-border: #304664;
  --color-complementary-brand: #5D7A9C;
  --color-success-text-primary: #63BE36;
  --color-success-bg-primary: #448325;
  --color-success-bg-secondary: #204210;
  --color-success-hover-bg-primary: #2E5E17;
  --color-success-border: #448325;
  --color-warning-text-primary: #FFC60B;
  --color-warning-bg-primary: #A68107;
  --color-warning-bg-secondary: #473802;
  --color-warning-hover-bg-primary: #7F6305;
  --color-warning-border: #A68107;
  --color-error-text-primary: #FF2424;
  --color-error-bg-primary: #E81C24;
  --color-error-bg-secondary: #700707;
  --color-error-hover-bg-primary: #BE0F0F;
  --color-error-border: #E81C24;
  --color-informative-text-primary: #00AEEF;
  --color-informative-bg-primary: #077CC0;
  --color-informative-bg-secondary: #003B61;
  --color-informative-hover-bg-primary: #005993;
  --color-informative-border: #077CC0;
  --color-opacity-black-weakest: #10101026;
  --color-opacity-black-weak: #1010104d;
  --color-opacity-black-medium: #10101080;
  --color-opacity-black-strong: #101010b3;
  --color-opacity-black-strongest: #101010d9;
  --color-shadow-subtle: #ffffff1a;
  --color-shadow-elevated: #ffffff33;
  --color-shadow-prominent: #ffffff4d;
  --color-shadow-scrim: #00000099;
  --shadow-elevation-header: 0 1px 3px var(--color-shadow-subtle);
  --shadow-elevation-panel: 0 8px 24px var(--color-shadow-elevated);
  --shadow-elevation-panel-prominent: 0 8px 24px var(--color-shadow-prominent);
  --shadow-elevation-drawer: -4px 0 24px var(--color-shadow-elevated);
  --shadow-elevation-modal: 0 16px 48px var(--color-shadow-prominent);
  --color-neutral-shadow-sm: var(--color-shadow-subtle);
  --color-neutral-shadow-md: var(--color-shadow-elevated);
  --color-neutral-shadow-lg: var(--color-shadow-prominent);
  --color-neutral-text-cross-white-primary: #ffffff;
  --color-neutral-text-cross-white-secondary: #c1c1c1;
  --color-neutral-bg-cross-white-primary: #101010;
  --color-neutral-bg-cross-white-secondary: #1b1b1b;
  --color-neutral-bg-cross-main-primary: #ffffff;
  --color-avatar-bg-1: #253C75;
  --color-avatar-bg-2: #448325;
  --color-avatar-bg-3: #63BE36;
  --color-avatar-bg-4: #F89C1B;
  --color-avatar-bg-5: #E81C24;
  --color-analogous-bg-primary: #3F1F63;
  --color-analogous-bg-secondary: #DEC1FF;
}

@media (prefers-color-scheme: dark) {
  /* line 237, app/assets/stylesheets/users/../design-system/_themes.scss */
  :root:not([data-theme="light"]) {
    --color-neutral-text-primary: #ffffff;
    --color-neutral-text-secondary: #c1c1c1;
    --color-neutral-text-disable: #858585;
    --color-neutral-text-active: #101010;
    --color-neutral-bg-primary: #101010;
    --color-neutral-bg-secondary: #1b1b1b;
    --color-neutral-bg-tertiary: #282828;
    --color-neutral-bg-disable: #464646;
    --color-neutral-bg-active: #ffffff;
    --color-neutral-border-primary: #464646;
    --color-neutral-border-secondary: #333333;
    --color-neutral-hover-bg-primary: #1b1b1b;
    --color-neutral-hover-bg-secondary: #282828;
    --color-neutral-hover-bg-tertiary: #464646;
    --color-neutral-hover-bg-cross-white-tertiary: #DCDCDC;
    --color-main-text-primary: #71DCD0;
    --color-main-bg-primary: #006654;
    --color-main-bg-secondary: #003327;
    --color-main-bg-active: #006654;
    --color-main-hover-bg-primary: #005C46;
    --color-main-border: #006654;
    --color-main-brand: #00A391;
    --color-complementary-text-primary: #E3E9F6;
    --color-complementary-bg-primary: #304664;
    --color-complementary-bg-secondary: #17283A;
    --color-complementary-hover-bg-primary: #1D3249;
    --color-complementary-border: #304664;
    --color-complementary-brand: #5D7A9C;
    --color-success-text-primary: #63BE36;
    --color-success-bg-primary: #448325;
    --color-success-bg-secondary: #204210;
    --color-success-hover-bg-primary: #2E5E17;
    --color-success-border: #448325;
    --color-warning-text-primary: #FFC60B;
    --color-warning-bg-primary: #A68107;
    --color-warning-bg-secondary: #473802;
    --color-warning-hover-bg-primary: #7F6305;
    --color-warning-border: #A68107;
    --color-error-text-primary: #FF2424;
    --color-error-bg-primary: #E81C24;
    --color-error-bg-secondary: #700707;
    --color-error-hover-bg-primary: #BE0F0F;
    --color-error-border: #E81C24;
    --color-informative-text-primary: #00AEEF;
    --color-informative-bg-primary: #077CC0;
    --color-informative-bg-secondary: #003B61;
    --color-informative-hover-bg-primary: #005993;
    --color-informative-border: #077CC0;
    --color-opacity-black-weakest: #10101026;
    --color-opacity-black-weak: #1010104d;
    --color-opacity-black-medium: #10101080;
    --color-opacity-black-strong: #101010b3;
    --color-opacity-black-strongest: #101010d9;
    --color-shadow-subtle: #ffffff1a;
    --color-shadow-elevated: #ffffff33;
    --color-shadow-prominent: #ffffff4d;
    --color-shadow-scrim: #00000099;
    --shadow-elevation-header: 0 1px 3px var(--color-shadow-subtle);
    --shadow-elevation-panel: 0 8px 24px var(--color-shadow-elevated);
    --shadow-elevation-panel-prominent: 0 8px 24px var(--color-shadow-prominent);
    --shadow-elevation-drawer: -4px 0 24px var(--color-shadow-elevated);
    --shadow-elevation-modal: 0 16px 48px var(--color-shadow-prominent);
    --color-neutral-shadow-sm: var(--color-shadow-subtle);
    --color-neutral-shadow-md: var(--color-shadow-elevated);
    --color-neutral-shadow-lg: var(--color-shadow-prominent);
    --color-neutral-text-cross-white-primary: #ffffff;
    --color-neutral-text-cross-white-secondary: #c1c1c1;
    --color-neutral-bg-cross-white-primary: #101010;
    --color-neutral-bg-cross-white-secondary: #1b1b1b;
    --color-neutral-bg-cross-main-primary: #ffffff;
    --color-avatar-bg-1: #253C75;
    --color-avatar-bg-2: #448325;
    --color-avatar-bg-3: #63BE36;
    --color-avatar-bg-4: #F89C1B;
    --color-avatar-bg-5: #E81C24;
    --color-analogous-bg-primary: #3F1F63;
    --color-analogous-bg-secondary: #DEC1FF;
  }
}

/* line 10, app/assets/stylesheets/users/login.scss */
body.auth-layout--login {
  background-color: var(--color-neutral-bg-primary);
  margin: 0;
  min-height: 100vh;
  padding: 0 !important;
}

/* line 17, app/assets/stylesheets/users/login.scss */
.login-page {
  --color-neutral-text-primary: #101010;
  --color-neutral-text-secondary: #646464;
  --color-neutral-text-disable: #A3A3A3;
  --color-neutral-text-active: #ffffff;
  --color-neutral-bg-primary: #ffffff;
  --color-neutral-bg-secondary: #F5F5F5;
  --color-neutral-bg-tertiary: #EBEBEB;
  --color-neutral-bg-disable: #DCDCDC;
  --color-neutral-bg-active: #101010;
  --color-neutral-border-primary: #C1C1C1;
  --color-neutral-border-secondary: #DCDCDC;
  --color-neutral-hover-bg-primary: #F5F5F5;
  --color-neutral-hover-bg-secondary: #EBEBEB;
  --color-neutral-hover-bg-tertiary: #DCDCDC;
  --color-neutral-hover-bg-cross-white-tertiary: #DCDCDC;
  --color-main-text-primary: #006654;
  --color-main-bg-primary: #006654;
  --color-main-bg-secondary: #ADE9E2;
  --color-main-bg-active: #006654;
  --color-main-hover-bg-primary: #005C46;
  --color-main-border: #006654;
  --color-main-brand: #00A391;
  --color-complementary-text-primary: #1D3249;
  --color-complementary-bg-primary: #304664;
  --color-complementary-bg-secondary: #F1F2FA;
  --color-complementary-hover-bg-primary: #1D3249;
  --color-complementary-border: #304664;
  --color-complementary-brand: #5D7A9C;
  --color-success-text-primary: #448325;
  --color-success-bg-primary: #448325;
  --color-success-bg-secondary: #D7F1C7;
  --color-success-hover-bg-primary: #2e5e17;
  --color-success-border: #448325;
  --color-warning-text-primary: #A68107;
  --color-warning-bg-primary: #A68107;
  --color-warning-bg-secondary: #FEEDB4;
  --color-warning-hover-bg-primary: #7F6305;
  --color-warning-border: #A68107;
  --color-error-text-primary: #E81C24;
  --color-error-bg-primary: #DA0707;
  --color-error-bg-secondary: #FFD1D1;
  --color-error-hover-bg-primary: #BE0F0F;
  --color-error-border: #DA0707;
  --color-informative-text-primary: #077CC0;
  --color-informative-bg-primary: #077CC0;
  --color-informative-bg-secondary: #B2EAFF;
  --color-informative-hover-bg-primary: #005993;
  --color-informative-border: #077CC0;
  --color-opacity-black-weakest: #10101026;
  --color-opacity-black-weak: #1010104d;
  --color-opacity-black-medium: #10101080;
  --color-opacity-black-strong: #101010b3;
  --color-opacity-black-strongest: #101010d9;
  --color-shadow-subtle: #1010100f;
  --color-shadow-elevated: #1010101a;
  --color-shadow-prominent: #1010102e;
  --color-shadow-scrim: #10101066;
  --shadow-elevation-header: 0 1px 3px var(--color-shadow-subtle);
  --shadow-elevation-panel: 0 8px 24px var(--color-shadow-elevated);
  --shadow-elevation-panel-prominent: 0 8px 24px var(--color-shadow-prominent);
  --shadow-elevation-drawer: -4px 0 24px var(--color-shadow-elevated);
  --shadow-elevation-modal: 0 16px 48px var(--color-shadow-prominent);
  --color-neutral-shadow-sm: var(--color-shadow-subtle);
  --color-neutral-shadow-md: var(--color-shadow-elevated);
  --color-neutral-shadow-lg: var(--color-shadow-prominent);
  --color-neutral-text-cross-white-primary: #ffffff;
  --color-neutral-text-cross-white-secondary: #c1c1c1;
  --color-neutral-bg-cross-white-primary: #ffffff;
  --color-neutral-bg-cross-white-secondary: #F5F5F5;
  --color-neutral-bg-cross-main-primary: #101010;
  --color-neutral-bg-cross-main-secondary: #1b1b1b;
  --color-avatar-bg-1: #253C75;
  --color-avatar-bg-2: #448325;
  --color-avatar-bg-3: #63BE36;
  --color-avatar-bg-4: #F89C1B;
  --color-avatar-bg-5: #E81C24;
  --color-analogous-bg-primary: #3F1F63;
  --color-analogous-bg-secondary: #DEC1FF;
  box-sizing: border-box;
  color: var(--color-neutral-text-primary);
  color-scheme: only light;
  display: flex;
  flex-direction: column;
  font-family: "Poppins", "Roboto", sans-serif;
  min-height: 100vh;
  --login-ref-scale: 0.45;
}

@media (min-width: 649px) {
  /* line 17, app/assets/stylesheets/users/login.scss */
  .login-page {
    --login-ref-scale: calc(100vw / 1440);
  }
}

@media (min-width: 3241px) {
  /* line 17, app/assets/stylesheets/users/login.scss */
  .login-page {
    --login-ref-scale: 2.25;
  }
}

/* line 36, app/assets/stylesheets/users/login.scss */
.login-page *,
.login-page *::before,
.login-page *::after {
  box-sizing: inherit;
}

/* line 43, app/assets/stylesheets/users/login.scss */
.login-page__brand {
  background-color: var(--color-neutral-bg-primary);
  container-name: login-brand;
  container-type: size;
  display: none;
  flex: 0 0 45%;
  max-width: 45%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  position: relative;
  width: 45%;
}

/* line 57, app/assets/stylesheets/users/login.scss */
.login-page__brand-bg {
  background-color: var(--color-neutral-bg-primary);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  left: 0;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  transform: scale(var(--login-ref-scale, 1));
  transform-origin: center bottom;
  z-index: 0;
}

/* line 73, app/assets/stylesheets/users/login.scss */
.login-page__brand-logo {
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 11dvh;
  transform: translateX(-50%);
  width: 90%;
  max-width: calc(432px * var(--login-ref-scale, 1));
  z-index: 1;
}

@media (max-height: 254px) {
  /* line 73, app/assets/stylesheets/users/login.scss */
  .login-page__brand-logo {
    top: 28px;
  }
}

@media (min-height: 1091px) {
  /* line 73, app/assets/stylesheets/users/login.scss */
  .login-page__brand-logo {
    top: 120px;
  }
}

/* line 92, app/assets/stylesheets/users/login.scss */
.login-page__brand-logo-img {
  aspect-ratio: 432 / 134;
  display: block;
  height: auto;
  opacity: 1;
  width: 100%;
}

/* line 100, app/assets/stylesheets/users/login.scss */
.login-page__panel {
  align-items: center;
  background: var(--color-neutral-bg-primary);
  color: var(--color-neutral-text-primary);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 32px 24px 72px;
  position: relative;
  width: 100%;
}

/* line 115, app/assets/stylesheets/users/login.scss */
.login-page__panel-inner {
  max-width: 400px;
  width: 100%;
}

/* line 120, app/assets/stylesheets/users/login.scss */
.login-page__title {
  margin: 0 0 8px;
}

/* line 124, app/assets/stylesheets/users/login.scss */
.login-page__subtitle {
  color: var(--color-neutral-text-secondary);
  margin: 0 0 28px;
}

/* line 129, app/assets/stylesheets/users/login.scss */
.login-page__divider {
  align-items: center;
  display: flex;
  gap: 12px;
  margin: 20px 0;
  width: 100%;
}

/* line 137, app/assets/stylesheets/users/login.scss */
.login-page__divider-line {
  background: var(--color-neutral-border-secondary);
  flex: 1;
  height: 1px;
}

/* line 143, app/assets/stylesheets/users/login.scss */
.login-page__divider-text {
  color: var(--color-neutral-text-disable);
  flex-shrink: 0;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* line 150, app/assets/stylesheets/users/login.scss */
.login-page__btn {
  align-items: center;
  appearance: none;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  font-family: "Poppins", "Roboto", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  justify-content: center;
  line-height: 1.25;
  min-height: 48px;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out;
  width: 100%;
}

/* line 170, app/assets/stylesheets/users/login.scss */
.login-page__btn--primary {
  background: var(--color-main-bg-primary);
  border-color: var(--color-main-bg-primary);
  color: var(--color-neutral-text-cross-white-primary);
}

/* line 175, app/assets/stylesheets/users/login.scss */
.login-page__btn--primary:hover {
  background: var(--color-main-hover-bg-primary);
  border-color: var(--color-main-hover-bg-primary);
  color: var(--color-neutral-text-cross-white-primary);
}

/* line 182, app/assets/stylesheets/users/login.scss */
.login-page__btn--secondary {
  background: var(--color-neutral-bg-secondary);
  border-color: var(--color-neutral-border-secondary);
  color: var(--color-neutral-text-primary);
}

/* line 187, app/assets/stylesheets/users/login.scss */
.login-page__btn--secondary:hover {
  background: var(--color-neutral-hover-bg-primary);
}

/* line 192, app/assets/stylesheets/users/login.scss */
.login-page__btn:disabled,
.login-page__btn--disabled {
  background: var(--color-neutral-bg-disable);
  border-color: var(--color-neutral-border-secondary);
  color: var(--color-neutral-text-secondary);
  cursor: not-allowed;
  pointer-events: none;
}

/* line 201, app/assets/stylesheets/users/login.scss */
.login-page__mode-form {
  display: block;
  margin: 0;
  width: 100%;
}

/* line 207, app/assets/stylesheets/users/login.scss */
.login-page__alert {
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 10px 12px;
  width: 100%;
}

/* line 214, app/assets/stylesheets/users/login.scss */
.login-page__alert--error {
  background: var(--color-error-bg-secondary);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text-primary);
}

/* line 220, app/assets/stylesheets/users/login.scss */
.login-page__alert--success {
  background: var(--color-success-bg-secondary);
  border: 1px solid var(--color-success-border);
  color: var(--color-success-text-primary);
}

/* line 226, app/assets/stylesheets/users/login.scss */
.login-page__control {
  margin-top: 18px;
  position: relative;
}

/* line 231, app/assets/stylesheets/users/login.scss */
.login-page__control--error .login-page__input {
  border-color: var(--color-error-border);
}

/* line 235, app/assets/stylesheets/users/login.scss */
.login-page__control--error .login-page__float-label {
  color: var(--color-error-text-primary);
}

/* line 239, app/assets/stylesheets/users/login.scss */
.login-page__input {
  background: var(--color-neutral-bg-primary);
  border: 1px solid var(--color-neutral-border-primary);
  border-radius: 12px;
  color: var(--color-neutral-text-primary);
  font-family: "Poppins", "Roboto", sans-serif;
  font-size: 0.875rem;
  line-height: 1.35;
  outline: none;
  padding: 16px 44px 14px 14px;
  transition: border-color 150ms ease-in-out;
  width: 100%;
}

/* line 253, app/assets/stylesheets/users/login.scss */
.login-page__input--with-toggle {
  padding-right: 76px;
}

/* line 257, app/assets/stylesheets/users/login.scss */
.login-page__input::placeholder {
  color: transparent;
}

/* line 261, app/assets/stylesheets/users/login.scss */
.login-page__control--focus .login-page__input,
.login-page__control:focus-within .login-page__input {
  border-color: var(--color-main-border);
}

/* line 266, app/assets/stylesheets/users/login.scss */
.login-page__control--error:focus-within .login-page__input,
.login-page__control--error.login-page__control--focus .login-page__input {
  border-color: var(--color-error-border);
}

/* line 271, app/assets/stylesheets/users/login.scss */
.login-page__float-label {
  background: linear-gradient(to bottom, var(--color-neutral-bg-primary) 55%, transparent 55%);
  color: var(--color-neutral-text-disable);
  font-size: 0.875rem;
  font-weight: 400;
  left: 11px;
  padding: 0 4px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: top 150ms ease-in-out, transform 150ms ease-in-out, color 150ms ease-in-out, font-size 150ms ease-in-out;
}

/* line 285, app/assets/stylesheets/users/login.scss */
.login-page__control:focus-within .login-page__float-label,
.login-page__control--filled .login-page__float-label,
.login-page__input:not(:placeholder-shown) + .login-page__float-label {
  font-size: 0.75rem;
  top: 0;
  transform: translateY(-50%);
}

/* line 293, app/assets/stylesheets/users/login.scss */
.login-page__control:focus-within:not(.login-page__control--error) .login-page__float-label,
.login-page__control--filled:not(.login-page__control--error) .login-page__float-label,
.login-page__control:not(.login-page__control--error) .login-page__input:not(:placeholder-shown) + .login-page__float-label {
  color: var(--color-main-border);
}

/* line 299, app/assets/stylesheets/users/login.scss */
.login-page__input-trail {
  align-items: center;
  bottom: 1px;
  display: flex;
  pointer-events: none;
  position: absolute;
  right: 10px;
  top: 1px;
}

/* line 309, app/assets/stylesheets/users/login.scss */
.login-page__input-trail svg,
.login-page__input-trail-img {
  display: block;
  height: 18px;
  object-fit: contain;
  width: 18px;
}

/* line 317, app/assets/stylesheets/users/login.scss */
.login-page__input-trail-img--key-dark {
  display: none;
}

/* line 321, app/assets/stylesheets/users/login.scss */
.dark .login-page .login-page__input-trail-img--key-light,
[data-theme='dark'] .login-page .login-page__input-trail-img--key-light {
  display: none;
}

/* line 326, app/assets/stylesheets/users/login.scss */
.dark .login-page .login-page__input-trail-img--key-dark,
[data-theme='dark'] .login-page .login-page__input-trail-img--key-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  /* line 332, app/assets/stylesheets/users/login.scss */
  html:not([data-theme='light']) .login-page .login-page__input-trail-img--key-light {
    display: none;
  }
  /* line 336, app/assets/stylesheets/users/login.scss */
  html:not([data-theme='light']) .login-page .login-page__input-trail-img--key-dark {
    display: block;
  }
}

/* line 341, app/assets/stylesheets/users/login.scss */
.login-page__field-hint {
  color: var(--color-error-text-primary);
  display: block;
  margin-top: 6px;
}

/* line 347, app/assets/stylesheets/users/login.scss */
.login-page__toggle-password {
  align-items: center;
  background: none;
  border: 0;
  color: var(--color-neutral-text-disable);
  cursor: pointer;
  display: flex;
  padding: 4px;
  pointer-events: auto;
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
}

/* line 362, app/assets/stylesheets/users/login.scss */
.login-page__toggle-password:hover {
  color: var(--color-neutral-text-secondary);
}

/* line 366, app/assets/stylesheets/users/login.scss */
.login-page__forgot-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* line 372, app/assets/stylesheets/users/login.scss */
.login-page__link {
  background: none;
  border: 0;
  color: var(--color-main-text-primary);
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-decoration: none;
}

/* line 382, app/assets/stylesheets/users/login.scss */
.login-page__link:hover {
  color: var(--color-main-hover-bg-primary);
  text-decoration: underline;
}

/* line 387, app/assets/stylesheets/users/login.scss */
.login-page__actions {
  margin-top: 22px;
}

/* line 391, app/assets/stylesheets/users/login.scss */
.login-page__footer {
  bottom: 20px;
  color: var(--color-neutral-text-disable);
  position: absolute;
  text-align: center;
}

/* line 398, app/assets/stylesheets/users/login.scss */
.login-page__footer a {
  color: var(--color-main-text-primary);
  text-decoration: none;
}

/* line 403, app/assets/stylesheets/users/login.scss */
.login-page__footer a:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  /* line 408, app/assets/stylesheets/users/login.scss */
  .login-page {
    align-items: stretch;
    flex-direction: row;
    min-height: 100vh;
    min-height: 100dvh;
  }
  /* line 415, app/assets/stylesheets/users/login.scss */
  .login-page__brand {
    display: block;
  }
  /* line 419, app/assets/stylesheets/users/login.scss */
  .login-page__panel {
    flex: 1 1 55%;
    max-width: 55%;
    min-height: 100vh;
    min-height: 100dvh;
    width: 55%;
  }
}