:root {
  color-scheme: light only;
  --clr-indigo-50: #F3F5FF;
  --clr-indigo-100: #DBDFFC;
  --clr-indigo-200: #B3BCFA;
  --clr-indigo-300: #8C99F8;
  --clr-indigo-400: #6576F6;
  --clr-indigo-500: #3D53F4;
  --clr-indigo-600: #394BD7;
  --clr-indigo-700: #3544BB;
  --clr-indigo-800: #303C9E;
  --clr-indigo-900: #2C3481;
  --clr-indigo-950: #121A51;
  --clr-sky-50: #F0F9FF;
  --clr-sky-100: #E0F2FE;
  --clr-sky-200: #BAE6FD;
  --clr-sky-300: #7DD3FC;
  --clr-sky-400: #38BDF8;
  --clr-sky-500: #0EA5E9;
  --clr-sky-600: #0284C7;
  --clr-sky-700: #0369A1;
  --clr-sky-800: #075985;
  --clr-sky-900: #0C4A6E;
  --clr-sky-950: #082F49;
  --clr-orange-50: #FFF7ED;
  --clr-orange-100: #FFEDD5;
  --clr-orange-200: #FED7AA;
  --clr-orange-300: #FDBA74;
  --clr-orange-400: #FB923C;
  --clr-orange-500: #F97316;
  --clr-orange-600: #EA580C;
  --clr-orange-700: #C2410C;
  --clr-orange-800: #9A3412;
  --clr-orange-900: #7C2D12;
  --clr-orange-950: #431407;
  --clr-green-50: #F0FDF4;
  --clr-green-100: #DCFCE7;
  --clr-green-200: #BBF7D0;
  --clr-green-300: #86EFAC;
  --clr-green-400: #4ADE80;
  --clr-green-500: #22C55E;
  --clr-green-600: #16A34A;
  --clr-green-700: #15803D;
  --clr-green-800: #166534;
  --clr-green-900: #14532D;
  --clr-green-950: #052E16;
  --clr-red-50: #FEF2F2;
  --clr-red-100: #FEE2E2;
  --clr-red-200: #FECACA;
  --clr-red-300: #FCA5A5;
  --clr-red-400: #F87171;
  --clr-red-500: #EF4444;
  --clr-red-600: #E2242E;
  --clr-red-700: #B91C1C;
  --clr-red-800: #991B1B;
  --clr-red-900: #7F1D1D;
  --clr-red-950: #450A0A;
  --clr-yellow-50: #FEFCE8;
  --clr-yellow-100: #FEF9C3;
  --clr-yellow-200: #FCEE8E;
  --clr-yellow-300: #FADF55;
  --clr-yellow-400: #F3D131;
  --clr-yellow-500: #E1B016;
  --clr-yellow-600: #C3890D;
  --clr-yellow-700: #A16207;
  --clr-yellow-800: #854D0E;
  --clr-yellow-900: #713F12;
  --clr-yellow-950: #422006;
  --clr-cyan-50: #ECFEFF;
  --clr-cyan-100: #CFFAFE;
  --clr-cyan-200: #A5F3FC;
  --clr-cyan-300: #67E8F9;
  --clr-cyan-400: #22D3EE;
  --clr-cyan-500: #06B6D4;
  --clr-cyan-600: #0891B2;
  --clr-cyan-700: #0E7490;
  --clr-cyan-800: #155E75;
  --clr-cyan-900: #164E63;
  --clr-cyan-950: #083344;
  --clr-gray-50: #F9FAFB;
  --clr-gray-100: #F3F4F6;
  --clr-gray-200: #E5E7E9;
  --clr-gray-300: #D3D5D8;
  --clr-gray-400: #9FA3AA;
  --clr-gray-500: #6E727A;
  --clr-gray-600: #4E545C;
  --clr-gray-700: #3B414A;
  --clr-gray-800: #222830;
  --clr-gray-900: #141820;
  --clr-gray-950: #06090F;
  --clr-white: #fff;
  --clr-black: #000;
  --clr-misc-sun: #FFC738;
  /* COMMON - Rename later */
  --clr-primary: var(--clr-indigo-500);
  --clr-secondary: var(--clr-red-600);
  --clr-tertiary: var(--clr-yellow-400);
  --clr-rev: var(--clr-white);
  --clr-d-gray: var(--clr-gray-900);
  --clr-m-gray: var(--clr-gray-700);
  --clr-l-gray: var(--clr-gray-600);
  --clr-2l-gray: var(--clr-gray-400);
  --clr-3l-gray: var(--clr-gray-200);
  --clr-success: var(--clr-green-500);
  --clr-pending: var(--clr-orange-500);
  --clr-fail: var(--clr-red-600);
  /* TEXT COLOR */
  --clr-heading: var(--clr-d-gray);
  --clr-subheading: var(--clr-tertiary);
  --clr-text-basic: var(--clr-m-gray);
  --clr-text-subtle: var(--clr-l-gray);
  --clr-text-accent: var(--clr-primary);
  --clr-info-label: var(--clr-indigo-950);
  /* CTA COLOR */
  --clr-btn-bg: var(--clr-primary);
  --clr-btn-stroke: var(--clr-primary);
  --clr-btn-text: var(--clr-rev);
  /* INPUT COLOR */
  --clr-input-placeholder: var(--clr-gray-400);
  --clr-input-bg: var(--clr-white);
  --clr-input-active: var(--clr-indigo-300);
  --clr-input-fail: var(--clr-red-400);
  --clr-input-dark: var(--clr-gray-800);
  /* STATUS COLOR */
  --clr-status-bg: var(--clr-green-100);
  --clr-status-stroke: var(--clr-green-200);
  --clr-status-text: var(--clr-green-950);
  /* NAV COLOR */
  --clr-nav-text: var(--clr-gray-700);
  --clr-nav-hover: var(--clr-indigo-500);
  /* TYPOGRAPHY */
  --ff-heading: "Inter", sans-serif;
  --ff-body: "Plus Jakarta Sans", sans-serif;
  --ff-accent: "Jua", sans-serif;
  --fw-r: 400;
  --fw-m: 500;
  --fw-sb: 600;
  --fw-b: 700;
  --fs-h-md: 36px;
  --fs-h-sm: 30px;
  --fs-h-xs: 24px;
  --fs-h-2xs: 20px;
  --fs-h-3xs: 18px;
  --fs-b-xl: 20px;
  --fs-b-lg: 18px;
  --fs-b-md: 16px;
  --fs-b-sm: 14px;
  --fs-b-xs: 12px;
  --fs-b-2xs: 10px;
  /* MISC */
}

/* CSS RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  overflow: visible;
}

html {
  color-scheme: dark light;
}

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}

button {
  font-family: var(--ff-body);
  font-weight: var(--fw-sb);
}

.lordicon {
  display: block;
  position: relative;
}

/* TYPOGRAPHY */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-b);
}

p,
a {
  font-family: var(--ff-body);
}

li {
  font-family: var(--ff-body);
  font-weight: var(--fw-m);
}

li a {
  color: var(--clr-nav-text);
}

li a:hover {
  color: var(--clr-nav-hover);
}

/* COMPONENTS */
/* Buttons */
.btnLogin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  margin-bottom: 12px;
  border-radius: 999px;
  font-size: var(--fs-b-md);
  font-weight: var(--fw-sb);
  background-color: var(--clr-btn-bg);
  border: 1px solid var(--clr-btn-stroke);
  color: var(--clr-btn-text);
}

.btnLogin:hover {
  cursor: pointer;
}

.btnPrimary {
  font-weight: var(--fw-m);
}

.btnPrimary:hover {
  --clr-btn-bg: var(--clr-indigo-600);
}

.btnAlt {
  --clr-btn-text: var(--clr-primary);
  --clr-btn-bg: var(--clr-white);
}

.btnAlt:hover {
  --clr-btn-bg: var(--clr-indigo-100);
}

.btnSecondary {
  --clr-btn-text: var(--clr-primary);
  --clr-btn-bg: var(--clr-indigo-50);
}

.btnSecondary:hover {
  --clr-btn-bg: var(--clr-indigo-100);
}

/* Inputs */
.inputContainer {
  position: relative;
  margin-bottom: 12px;
}

.inputContainer input {
  width: 100%;
}

.inputLogin {
  --h-input: 64px;
  --clr-input-stroke: var(--clr-3l-gray);
  padding: 16px 16px 6px 16px;
  border: 1px solid var(--clr-input-stroke);
  border-radius: 8px;
  height: var(--h-input);
  font-family: var(--ff-body);
  font-weight: var(--fw-sb);
  color: var(--clr-d-gray);
}

.inputLabel {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  pointer-events: none;
  left: 16px;
  font-family: var(--ff-body);
  font-size: var(--fs-b-sm);
  color: var(--clr-2l-gray);
  transition: 0.3s;
}

.showPassBtn {
  cursor: pointer;
  position: absolute;
  padding: 8px 8px;
  top: 50%;
  margin-top: -22px;
  right: 6px;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
}

:focus {
  outline: 3px solid var(--clr-indigo-300);
}

:focus:not(:focus-visible) {
  outline: none;
}

.inputLogin:not(:-moz-placeholder-shown) + .inputLabel {
  top: 0;
  font-size: var(--fs-b-xs);
  transform: translateY(6px);
  -moz-transition: 0.3s;
  transition: 0.3s;
}

.inputLogin:focus + .inputLabel,
.inputLogin:valid + .inputLabel,
.inputLogin:not(:placeholder-shown) + .inputLabel {
  top: 0;
  font-size: var(--fs-b-xs);
  transform: translateY(6px);
  transition: 0.3s;
}

.inputUpper {
  text-transform: uppercase;
}

.inputBirthDate {
  position: absolute;
  top: 6px;
  left: 16px;
  font-family: var(--ff-body);
  font-size: var(--fs-b-xs);
  color: var(--clr-2l-gray);
}

/* BREAKPOINTS VARIABLES */
@media (max-width: 1023px) {
  :root {
    --fs-h-md: 30px;
    --fs-h-sm: 24px;
    --fs-h-xs: 20px;
    --fs-h-2xs: 18px;
    --fs-h-3xs: 16px;
    --fs-b-xl: 18px;
    --fs-b-lg: 16px;
    --fs-b-md: 14px;
    --fs-b-sm: 12px;
    --fs-b-xs: 10px;
    --fs-b-2xs: 10px;
  }
  .btnLogin {
    min-height: 48px;
  }
}
@media (max-width: 767px) {
  :root {
    --fs-h-md: 18px;
    --fs-h-sm: 16px;
    --fs-h-xs: 16px;
    --fs-h-2xs: 14px;
    --fs-h-3xs: 12px;
    --fs-b-xl: 16px;
    --fs-b-lg: 14px;
    --fs-b-md: 12px;
    --fs-b-sm: 10px;
    --fs-b-xs: 10px;
    --fs-b-2xs: 10px;
  }
  .btnLogin {
    min-height: 40px;
  }
}
/* LOGIN PAGE */
.fullScreen {
  display: flex;
  align-items: stretch;
}

.loginPane {
  flex: 1 1 0%;
  padding: 20px 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  min-height: 100vh;
}

.loginHeader,
.loginFooter {
  width: 100%;
}

.rightPane {
  background-color: var(--clr-indigo-950);
  background-image: url("/assets/bg-login.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--clr-rev);
}

/* Login Header */
.loginHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
}

.headerNav {
  flex-grow: 1;
}
.headerNav ol,
.headerNav ul {
  padding-left: 0;
  margin-bottom: 0;
}

.navList {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navList li {
  font-size: var(--fs-b-sm);
  font-weight: var(--fw-m);
}

.navLink {
  display: inline-block;
  position: relative;
  height: 48px;
}

.navLink a {
  padding: 12px 0px;
}

.navLink i,
.mobileDrop i {
  margin-left: 4px;
}

.rightLine::after {
  content: "";
  width: 0%;
  height: 2px;
  background: var(--clr-tertiary);
  display: block;
  margin: 6px 0px;
  transition: 0.2s;
}

.leftLine::after {
  content: "";
  width: 0%;
  height: 2px;
  background: var(--clr-primary);
  display: block;
  margin: 6px 0px;
  transition: 0.2s;
}

.rightLine:hover::after {
  width: 100%;
}

.leftLine:hover::after {
  width: 100%;
}

.mobileNav {
  display: none;
}

/* Dropdown Right */
.dropdownRightMenu {
  margin-top: 6px;
  display: none;
  position: absolute;
  text-wrap: nowrap;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
  z-index: 999;
}

.dropdownRightMenu::before {
  content: "";
  width: 0%;
  height: 2px;
  background: var(--clr-tertiary);
  display: block;
  transition: 0.3s;
}

.dropdownRightMenu li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dropdownRightMenu li a {
  display: block;
  padding: 8px 16px;
  font-size: var(--fs-m);
  font-weight: var(--fw-sb);
  color: var(--clr-rev);
}

.dropdownRightMenu li:last-child {
  border-bottom: 0;
}

.dropdownRightMenu li:hover {
  background-color: var(--clr-tertiary);
}

.dropdownRightMenu li:hover a {
  font-weight: var(--fw-b);
  color: var(--clr-gray-950);
}

.navLink:hover .dropdownRightMenu {
  display: block;
}

.navLink:hover .dropdownRightMenu::before {
  width: 100%;
}

/* Dropdown Left */
.dropdownLeftMenu {
  margin-top: 6px;
  display: none;
  position: absolute;
  text-wrap: nowrap;
  background-color: var(--clr-white);
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.dropdownLeftMenu::before {
  content: "";
  width: 0%;
  height: 2px;
  background: var(--clr-primary);
  display: block;
  transition: 0.3s;
}

.dropdownLeftMenu li {
  border-bottom: 1px solid var(--clr-gray-100);
}

.dropdownLeftMenu li a {
  display: block;
  padding: 10px 16px;
  font-size: var(--fs-m);
  font-weight: var(--fw-sb);
  color: var(--clr-text-basic);
}

.dropdownLeftMenu li:last-child {
  border-bottom: 0;
}

.dropdownLeftMenu li:hover {
  background-color: var(--clr-primary);
}

.dropdownLeftMenu li:hover a {
  font-weight: var(--fw-b);
  color: var(--clr-rev);
}

.navLink:hover .dropdownLeftMenu {
  display: block;
}

.navLink:hover .dropdownLeftMenu::before {
  width: 100%;
}

.leftNav {
  display: none;
  margin: 0px 40px;
}

.leftHeader .navLink::after {
  background: var(--clr-primary);
}

.leftMiddleContent {
  display: none;
}

.rightNav ul li {
  font-weight: var(--fw-r);
}

.rightNav ul li a {
  --clr-nav-text: var(--clr-rev);
}

.rightNav ul li a:hover {
  --clr-nav-hover: var(--clr-tertiary);
}

.headerAltLogos {
  display: flex;
  align-items: center;
  gap: 18px;
}

.menuBurger {
  display: none;
  border: 0;
  border-radius: 6px;
  background-color: var(--clr-white);
}

.menuBurger:hover {
  cursor: pointer;
  background-color: var(--clr-3l-gray);
}

/* Login Container */
.loginContainer {
  margin: 24px 0px;
  max-width: 512px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rightContainer {
  gap: 80px;
}

.downloadGroup {
  text-align: center;
  margin-bottom: 120px;
}

.downloadGroup p {
  font-size: var(--fs-b-md);
  font-weight: var(--fw-sb);
  margin-bottom: 24px;
}

.imgLinks {
  display: flex;
  gap: 16px;
  align-items: center;
}

.mobileBadges {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.collabGroup {
  text-align: center;
}

.collabGroup p {
  margin-bottom: 16px;
  font-size: var(--fs-b-xs);
}

.collabImgs {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.pageIntro {
  text-align: center;
}

.pageIntro h1 {
  font-size: var(--fs-h-sm);
  font-weight: var(--fw-b);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pageIntro p {
  font-size: var(--fs-b-md);
  font-weight: var(--fw-m);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--clr-tertiary);
  margin-bottom: 12px;
}

.loginGroup,
.forgotGroup,
.createGroup {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.hideGroup {
  display: none;
}

.loginGroup h2,
.forgotGroup h2,
.createGroup h2 {
  color: var(--clr-heading-basic);
  font-size: var(--fs-h-2xs);
  font-weight: var(--fw-b);
  margin-bottom: 12px;
}

.loginInputs {
  width: 100%;
  margin-bottom: 40px;
}

.forgotInput,
.createInputs {
  width: 100%;
  margin-bottom: 16px;
}

.forgotPass {
  width: 100%;
  text-align: right;
}
.forgotPass label {
  color: var(--clr-indigo-900);
  font-size: var(--fs-b-sm);
  font-weight: var(--fw-b);
  cursor: pointer;
}
.forgotPass label:hover {
  color: var(--clr-indigo-600);
}

.loginBtns {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.loginBtns p {
  font-weight: var(--fw-b);
  color: var(--clr-primary);
  margin-bottom: 12px;
}

.backBtn {
  background-color: var(--clr-white);
  border: 0;
  margin-bottom: 12px;
}

.backBtn .lordicon {
  cursor: pointer;
  transform: scaleX(-1);
  color: var(--clr-gray-900);
}

.backBtn:hover .lordicon {
  color: var(--clr-primary);
}

.createLastLine {
  display: flex;
  justify-content: flex-end;
}
.createLastLine span {
  font-size: var(--fs-b-md);
  font-weight: var(--fw-m);
  margin-right: 6px;
}
.createLastLine label {
  font-size: var(--fs-b-md);
  font-weight: var(--fw-b);
  cursor: pointer;
}
.createLastLine label:hover {
  color: var(--clr-indigo-600);
}

/* Login Footer */
.loginFooter {
  min-height: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.loginFooter p {
  max-width: 512px;
  text-align: center;
  font-size: var(--fs-b-2xs);
}

/* MEDIA QUERY */
@media (max-width: 1248px) {
  .loginPane {
    padding: 20px 32px;
  }
}
@media (max-width: 1023px) {
  .rightPane {
    display: none;
  }
  .leftNav {
    display: block;
  }
  .bnrsLogo img,
  .headerAltLogos img {
    height: 32px;
  }
  .navLink,
  .loginHeader {
    height: 32px;
  }
  .navLink {
    padding: 6px 0;
  }
}
@media (max-width: 767px) {
  .loginPane {
    padding: 18px 12px;
  }
  .downloadGroup {
    margin-bottom: 40px;
  }
  .leftMiddleContent {
    display: block;
    margin-top: 32px;
  }
  .loginContainer {
    margin: 40px 0;
  }
  .navList {
    display: none;
  }
  /* Mobile Nav */
  .mobileNav {
    display: block;
    position: fixed;
    background-color: rgba(18, 26, 81, 0.9);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    min-width: 320px;
    top: 0;
    bottom: 0;
    right: -420px;
    z-index: 999;
    transition: 0.35s;
    transition-timing-function: ease-out;
    overflow: auto;
  }
  .mobileNavLink a,
  .mobileDrop a {
    font-size: var(--fs-b-md);
    display: block;
    padding: 10px 24px;
    color: var(--clr-white);
  }
  .mobileDrop a:hover {
    color: var(--clr-indigo-200);
  }
  .mobileNavLink a:hover,
  .mobileSub a:hover {
    background-color: var(--clr-tertiary);
    color: var(--clr-indigo-950);
    font-weight: var(--fw-b);
  }
  .mobileSub a {
    display: block;
    padding: 10px 40px;
    color: var(--clr-white);
  }
  .mobileNavLink {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  }
  .mobileNavLink:last-child {
    border-bottom: 0;
  }
  .mobileSub {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  }
  .mobileSub:last-child {
    border-bottom: 0;
  }
  .mobileSubGroup {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.03);
  }
  .mobileTop {
    display: flex;
    justify-content: flex-end;
  }
  .closeBtn {
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    margin: 8px 24px;
    display: block;
    color: var(--clr-white);
  }
  .closeBtn:hover {
    cursor: pointer;
    color: var(--clr-tertiary);
  }
  .menuBurger {
    display: block;
  }
  /* Inputs */
  .inputLogin {
    height: 48px;
  }
  .inputLogin:not(:-moz-placeholder-shown) + .inputLabel {
    transform: translateY(3px);
  }
  .inputLogin:focus + .inputLabel,
  .inputLogin:valid + .inputLabel,
  .inputLogin:not(:placeholder-shown) + .inputLabel {
    transform: translateY(3px);
  }
}
@media (max-width: 419px) {
  .headerNav {
    position: absolute;
  }
  .imgLinks {
    flex-direction: column;
  }
  .mobileNav {
    width: 100%;
  }
  .bnrsLogo,
  .headerAltLogos {
    flex-shrink: 0;
  }
}
.validInputField {
  border: solid 1px var(--clr-primary);
}

.invalidInputField {
  border: solid 1px var(--clr-secondary);
}

.txtValid {
  color: var(--clr-primary);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  justify-content: flex-start;
}

.txtNotValid {
  color: var(--clr-secondary);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  justify-content: flex-start;
}

/* Override SweetAlert2 button color */
.swal2-confirm {
  background-color: var(--clr-primary) !important;
  /* Green */
  border-color: var(--clr-primary) !important;
}
.swal2-confirm :hover {
  background-color: var(--clr-indigo-600) !important;
  border-color: var(--clr-indigo-600) !important;
}

.verification_modal .inputOTP {
  width: 70px;
  height: 70px;
  min-width: 40px;
  min-height: 40px;
  border: 2px solid #DADADA;
  border-radius: 5px;
  text-align: center;
  font-size: 30px;
}
.verification_modal .btn-warning {
  color: var(--clr-primary);
  background-color: var(--clr-white);
  border: 1px solid var(--clr-btn-stroke);
  border-radius: 999px;
  font-size: var(--fs-b-md);
  font-weight: var(--fw-sb);
  padding: 8px;
  min-width: 100px;
}
.verification_modal .btn-warning:hover {
  background-color: var(--clr-indigo-100);
}
.verification_modal .btn-success {
  border-radius: 999px;
  font-size: var(--fs-b-md);
  font-weight: var(--fw-sb);
  background-color: var(--clr-btn-bg);
  border: 1px solid var(--clr-btn-stroke);
  color: var(--clr-btn-text);
  background-color: var(--clr-btn-bg);
  padding: 8px;
  min-width: 100px;
}
.verification_modal .btn-success:hover {
  background-color: var(--clr-indigo-600);
}

@media (max-width: 419px) {
  .email-verifier {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: normal;
  }
  .email-verifier input {
    width: 100%;
    margin-bottom: 10px;
    padding: 12px 10px;
    border-radius: 10px;
  }
  .email-verifier button {
    border-radius: 100px !important;
    display: flex !important;
    justify-content: center;
    align-items: center !important;
  }
}