@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&family=Readex+Pro:wght@300;400&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--Inter);
}
body {
  display: flex;
  width: 100%;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background-color: #050505; */
}
:root {
  --Inter: "Inter", sans-serif;
  --Roboto: "Roboto", sans-serif;
  --textNormal: 13px;
  --roundedStandarad: 3px;
  --roundendCircle: 20px;
  --textWhite: #fff;
  --onedrive-blue: #005a9e;
  --testWhite: #faf9f6;
  --white: #fff;
  --boneWhite: #f9f6ee;
  --lightGray: #878a8c;
  --notoSans: "Noto Sans", sans-serif;
  --readexPro: "Readex Pro", sans-serif;
  /* REDDIT*/
  --newCommunityTheme-actionIcon: #818384;
  --newCommunityTheme-actionIconAlpha20: rgba(129, 131, 132, 0.2);
  --newCommunityTheme-actionIconAlpha50: rgba(129, 131, 132, 0.5);
  --newCommunityTheme-actionIconShaded80: #676869;
  --newCommunityTheme-actionIconTinted80: #9a9b9c;
  --newCommunityTheme-active: #0079d3;
  --newCommunityTheme-activeAlpha10: rgba(0, 121, 211, 0.1);
  --newCommunityTheme-activeAlpha20: rgba(0, 121, 211, 0.2);
  --newCommunityTheme-activeAlpha50: rgba(0, 121, 211, 0.1);
  --newCommunityTheme-activeLight60: #33a8ff;
  --newCommunityTheme-activeShaded80: #0060a8;
  --newCommunityTheme-activeShaded90: #006cbd;
  --newCommunityTheme-activeTinted05: #f2f8fc;
  --newCommunityTheme-banner-backgroundColor: #2d97e5;
  --newCommunityTheme-banner-backgroundImage: initial;
  --newCommunityTheme-banner-backgroundImagePosition: cover;
  --newCommunityTheme-banner-communityNameFormat: slashtag;
  --newCommunityTheme-banner-height: 64;
  --newCommunityTheme-banner-iconColor: #0079d3;
  --newCommunityTheme-banner-iconDimensions-borderRadius: 24;
  --newCommunityTheme-banner-iconDimensions-customSize: 32;
  --newCommunityTheme-banner-iconDimensions-padding: 6;
  --newCommunityTheme-banner-iconDimensions-size: 24;
  --newCommunityTheme-banner-iconImage: initial;
  --newCommunityTheme-banner-lineHeight: 38;
  --newCommunityTheme-banner-positionedImage: initial;
  --newCommunityTheme-banner-positionedImageAlignment: left;
  --newCommunityTheme-banner-positionedImageHeight: 48;
  --newCommunityTheme-banner-secondaryBannerPositionedImage: initial;
  --newCommunityTheme-body: #1a1a1b;
  --newCommunityTheme-bodyAlpha50: rgba(26, 26, 27, 0.5);
  --newCommunityTheme-bodyAlpha70: rgba(26, 26, 27, 0.7);
  --newCommunityTheme-bodyAlpha80: rgba(26, 26, 27, 0.8);
  --newCommunityTheme-bodyFade: #1a1a1b00;
  --newCommunityTheme-bodyShaded80: #141415;
  --newCommunityTheme-bodyText: #d7dadc;
  --newCommunityTheme-bodyTextAlpha03: rgba(215, 218, 220, 0.03);
  --newCommunityTheme-bodyTextAlpha20: rgba(215, 218, 220, 0.2);
  --newCommunityTheme-bodyTextShaded20: #2b2b2c;
  --newCommunityTheme-bodyTextTinted20: #f7f7f8;
  --newCommunityTheme-bodyTinted50: #8c8c8d;
  --newCommunityTheme-bodyTinted80: #474748;
  --newCommunityTheme-button: #d7dadc;
  --newCommunityTheme-buttonAlpha05: rgba(215, 218, 220, 0.05);
  --newCommunityTheme-buttonAlpha10: rgba(215, 218, 220, 0.1);
  --newCommunityTheme-buttonAlpha20: rgba(215, 218, 220, 0.2);
  --newCommunityTheme-buttonAlpha40: rgba(215, 218, 220, 0.4);
  --newCommunityTheme-buttonAlpha50: rgba(215, 218, 220, 0.5);
  --newCommunityTheme-buttonAlpha80: rgba(215, 218, 220, 0.8);
  --newCommunityTheme-buttonShaded80: #acaeb0;
  --newCommunityTheme-buttonTinted20: #f7f7f8;
  --newCommunityTheme-buttonTinted50: #ebeced;
  --newCommunityTheme-buttonTinted80: #dfe1e3;
  --newCommunityTheme-canvas: #030303;
  --newCommunityTheme-errorText: #ff0000;
  --newCommunityTheme-field: #272729;
  --newCommunityTheme-fieldFade: #27272900;
  --newCommunityTheme-flair: #343536;
  --newCommunityTheme-highlight: #17232d;
  --newCommunityTheme-inactive: #343536;
  --newCommunityTheme-invertFilter: invert(0.9);
  --newCommunityTheme-lightText: #ffffff;
  --newCommunityTheme-lightTextAlpha75: rgba(255, 255, 255, 0.75);
  --newCommunityTheme-line: #343536;
  --newCommunityTheme-lineShaded80: #292a2b;
  --newCommunityTheme-lineShaded90: #2e2f30;
  --newCommunityTheme-lineShadedNinety: #2e2f30;
  --newCommunityTheme-linkText: #4fbcff;
  --newCommunityTheme-linkTextAlpha80: rgba(79, 188, 255, 0.5);
  --newCommunityTheme-linkTextShaded80: #3f96cc;
  --newCommunityTheme-linkTextTinted80: #72c9ff;
  --newCommunityTheme-linkTextWithBody: #4193c6;
  --newCommunityTheme-menu: #030303;
  --newCommunityTheme-menuActiveText: #d7dadc;
  --newCommunityTheme-menuButtonBackground-active: rgba(255, 255, 255, 0.08);
  --newCommunityTheme-menuButtonBackground-focus: rgba(255, 255, 255, 0.12);
  --newCommunityTheme-menuButtonBackground-hover: rgba(255, 255, 255, 0.04);
  --newCommunityTheme-menuInactiveText: #d7dadc;
  --newCommunityTheme-metaText: #818384;
  --newCommunityTheme-metaTextAlpha50: rgba(129, 131, 132, 0.5);
  --newCommunityTheme-metaTextShaded80: #676869;
  --newCommunityTheme-monospaceColor: #5291f8;
  --newCommunityTheme-navBar-activeLink: #e9f5fd;
  --newCommunityTheme-navBar-activeSubmenuCaret: #d7dadc;
  --newCommunityTheme-navBar-activeSubmenuLink: #d7dadc;
  --newCommunityTheme-navBar-backgroundColor: #030303;
  --newCommunityTheme-navBar-backgroundImage: initial;
  --newCommunityTheme-navBar-hoverLink: #d7dadc;
  --newCommunityTheme-navBar-inactiveLink: #d7dadc;
  --newCommunityTheme-navBar-inactiveSubmenuCaret: #d7dadc;
  --newCommunityTheme-navBar-inactiveSubmenuLink: #d7dadc;
  --newCommunityTheme-navBar-submenuBackgroundColor: #1a1a1b;
  --newCommunityTheme-navIcon: #d7dadc;
  --newCommunityTheme-navIconFaded10: rgba(215, 218, 220, 0.1);
  --newCommunityTheme-nsfwBlocking-bgcolor: #030303;
  --newCommunityTheme-nsfwBlocking-color: #ffffff;
  --newCommunityTheme-nsfwBlocking-contentTitleBgColor: #272729;
  --newCommunityTheme-nsfwBlocking-mainCtaBgColor: #1a1a1b;
  --newCommunityTheme-pageHeader: #818384;
  --newCommunityTheme-placeholder: #3a3a3c;
  --newCommunityTheme-post: #1a1a1b;
  --newCommunityTheme-postError: #301718;
  --newCommunityTheme-postFlairText: #ffffff;
  --newCommunityTheme-postIcon: #818384;
  --newCommunityTheme-postLine: #343536;
  --newCommunityTheme-postLineShaded80: #292a2b;
  --newCommunityTheme-postLineShaded90: #2e2f30;
  --newCommunityTheme-postTinted20: #d1d1d1;
  --newCommunityTheme-postTransparent20: rgba(26, 26, 27, 0.8);
  --newCommunityTheme-primaryButtonShadedEighty: #acaeb0;
  --newCommunityTheme-primaryButtonTintedEighty: #dfe1e3;
  --newCommunityTheme-primaryButtonTintedFifty: #ebeced;
  --newCommunityTheme-primaryButtonTintedSixty: #e7e8ea;
  --newCommunityTheme-report: #1c1402;
  --newCommunityTheme-search-syntaxHighlightBackgroundColor: #fff7e5;
  --newCommunityTheme-search-syntaxHighlightColor: #0a0a0a;
  --newCommunityTheme-titleText: #d7dadc;
  --newCommunityTheme-upsell-appleIcon: #7d7d7d;
  --newCommunityTheme-upsell-ssoButtonBorderColor: #d7dadc;
  --newCommunityTheme-upsell-ssoButtonTextColor: #d7dadc;
  --newCommunityTheme-voteIcons-downvoteActive: initial;
  --newCommunityTheme-voteIcons-downvoteInactive: initial;
  --newCommunityTheme-voteIcons-upvoteActive: initial;
  --newCommunityTheme-voteIcons-upvoteInactive: initial;
  --newCommunityTheme-voteText-base: #818384;
  --newCommunityTheme-voteText-downvote: #7193ff;
  --newCommunityTheme-voteText-downvoteShaded80: #5a75cc;
  --newCommunityTheme-voteText-downvoteTinted80: #8da8ff;
  --newCommunityTheme-voteText-upvote: #ff4500;
  --newCommunityTheme-voteText-upvoteShaded80: #cc3700;
  --newCommunityTheme-voteText-upvoteTinted80: #ff6a32;
  --newCommunityTheme-widgetColors-appleIcon: #7d7d7d;
  --newCommunityTheme-widgetColors-lineColor: #343536;
  --newCommunityTheme-widgetColors-sidebarWidgetBackgroundColor: #1a1a1b;
  --newCommunityTheme-widgetColors-sidebarWidgetBorderColor: #474748;
  --newCommunityTheme-widgetColors-sidebarWidgetHeaderColor: #1a1a1b;
  --newCommunityTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: rgba(
    26,
    26,
    27,
    0.6
  );
  --newCommunityTheme-widgetColors-sidebarWidgetTextColor: #d7dadc;
  --newCommunityTheme-widgetColors-sidebarWidgetTextColorShaded80: #acaeb0;
  --newCommunityTheme-widgetColors-sidebarWidgetTitleColor: #818384;
  --newRedditTheme-actionIcon: #818384;
  --newRedditTheme-actionIconAlpha20: rgba(129, 131, 132, 0.2);
  --newRedditTheme-actionIconAlpha50: rgba(129, 131, 132, 0.5);
  --newRedditTheme-actionIconShaded80: #676869;
  --newRedditTheme-actionIconTinted80: #9a9b9c;
  --newRedditTheme-active: #0079d3;
  --newRedditTheme-activeAlpha10: rgba(0, 121, 211, 0.1);
  --newRedditTheme-activeAlpha20: rgba(0, 121, 211, 0.2);
  --newRedditTheme-activeAlpha50: rgba(0, 121, 211, 0.5);
  --newRedditTheme-activeLight60: #33a8ff;
  --newRedditTheme-activeShaded80: #0060a8;
  --newRedditTheme-activeShaded90: #006cbd;
  --newRedditTheme-activeTinted05: #f2f8fc;
  --newRedditTheme-banner-backgroundColor: #24a0ed;
  --newRedditTheme-banner-iconColor: #24a0ed;
  --newRedditTheme-body: #1a1a1b;
  --newRedditTheme-bodyAlpha50: rgba(26, 26, 27, 0.5);
  --newRedditTheme-bodyAlpha70: rgba(26, 26, 27, 0.7);
  --newRedditTheme-bodyAlpha80: rgba(26, 26, 27, 0.8);
  --newRedditTheme-bodyFade: #1a1a1b00;
  --newRedditTheme-bodyShaded80: #141415;
  --newRedditTheme-bodyText: #d7dadc;
  --newRedditTheme-bodyTextAlpha03: rgba(215, 218, 220, 0.03);
  --newRedditTheme-bodyTextAlpha20: rgba(215, 218, 220, 0.2);
  --newRedditTheme-bodyTextShaded20: #2b2b2c;
  --newRedditTheme-bodyTextTinted20: #f7f7f8;
  --newRedditTheme-bodyTinted50: #8c8c8d;
  --newRedditTheme-bodyTinted80: #474748;
  --newRedditTheme-button: #d7dadc;
  --newRedditTheme-buttonAlpha05: rgba(215, 218, 220, 0.05);
  --newRedditTheme-buttonAlpha10: rgba(215, 218, 220, 0.1);
  --newRedditTheme-buttonAlpha20: rgba(215, 218, 220, 0.2);
  --newRedditTheme-buttonAlpha40: rgba(215, 218, 220, 0.4);
  --newRedditTheme-buttonAlpha50: rgba(215, 218, 220, 0.5);
  --newRedditTheme-buttonAlpha80: rgba(215, 218, 220, 0.8);
  --newRedditTheme-buttonShaded80: #acaeb0;
  --newRedditTheme-buttonTinted20: #f7f7f8;
  --newRedditTheme-buttonTinted50: #ebeced;
  --newRedditTheme-buttonTinted80: #dfe1e3;
  --newRedditTheme-canvas: #030303;
  --newRedditTheme-errorText: #ff0000;
  --newRedditTheme-field: #272729;
  --newRedditTheme-fieldFade: #27272900;
  --newRedditTheme-flair: #343536;
  --newRedditTheme-highlight: #17232d;
  --newRedditTheme-inactive: #343536;
  --newRedditTheme-invertFilter: invert(0.9);
  --newRedditTheme-lightText: #ffffff;
  --newRedditTheme-lightTextAlpha75: rgba(255, 255, 255, 0.75);
  --newRedditTheme-line: #343536;
  --newRedditTheme-lineShaded80: #292a2b;
  --newRedditTheme-lineShaded90: #2e2f30;
  --newRedditTheme-lineShadedNinety: #2e2f30;
  --newRedditTheme-linkText: #4fbcff;
  --newRedditTheme-linkTextAlpha80: rgba(79, 188, 255, 0.5);
  --newRedditTheme-linkTextShaded80: #3f96cc;
  --newRedditTheme-linkTextTinted80: #72c9ff;
  --newRedditTheme-linkTextWithBody: #4193c6;
  --newRedditTheme-menu: #030303;
  --newRedditTheme-menuActiveText: #d7dadc;
  --newRedditTheme-menuButtonBackground-active: rgba(255, 255, 255, 0.08);
  --newRedditTheme-menuButtonBackground-focus: rgba(255, 255, 255, 0.12);
  --newRedditTheme-menuButtonBackground-hover: rgba(255, 255, 255, 0.04);
  --newRedditTheme-menuInactiveText: #d7dadc;
  --newRedditTheme-metaText: #818384;
  --newRedditTheme-metaTextAlpha50: rgba(129, 131, 132, 0.5);
  --newRedditTheme-metaTextShaded80: #676869;
  --newRedditTheme-monospaceColor: #5291f8;
  --newRedditTheme-navBar-activeLink: #e9f5fd;
  --newRedditTheme-navBar-activeSubmenuCaret: #d7dadc;
  --newRedditTheme-navBar-activeSubmenuLink: #d7dadc;
  --newRedditTheme-navBar-backgroundColor: #030303;
  --newRedditTheme-navBar-backgroundImage: initial;
  --newRedditTheme-navBar-hoverLink: #d7dadc;
  --newRedditTheme-navBar-inactiveLink: #d7dadc;
  --newRedditTheme-navBar-inactiveSubmenuCaret: #d7dadc;
  --newRedditTheme-navBar-inactiveSubmenuLink: #d7dadc;
  --newRedditTheme-navBar-submenuBackgroundColor: #1a1a1b;
  --newRedditTheme-navIcon: #d7dadc;
  --newRedditTheme-navIconFaded10: rgba(215, 218, 220, 0.1);
  --newRedditTheme-nsfwBlocking-bgcolor: #030303;
  --newRedditTheme-nsfwBlocking-color: #ffffff;
  --newRedditTheme-nsfwBlocking-contentTitleBgColor: #272729;
  --newRedditTheme-nsfwBlocking-mainCtaBgColor: #1a1a1b;
  --newRedditTheme-pageHeader: #818384;
  --newRedditTheme-placeholder: #3a3a3c;
  --newRedditTheme-post: #1a1a1b;
  --newRedditTheme-postError: #301718;
  --newRedditTheme-postFlairText: #ffffff;
  --newRedditTheme-postIcon: #818384;
  --newRedditTheme-postLine: #343536;
  --newRedditTheme-postLineShaded80: #292a2b;
  --newRedditTheme-postLineShaded90: #2e2f30;
  --newRedditTheme-postTinted20: #d1d1d1;
  --newRedditTheme-postTransparent20: rgba(26, 26, 27, 0.8);
  --newRedditTheme-primaryButtonShadedEighty: #acaeb0;
  --newRedditTheme-primaryButtonTintedEighty: #dfe1e3;
  --newRedditTheme-primaryButtonTintedFifty: #ebeced;
  --newRedditTheme-primaryButtonTintedSixty: #e7e8ea;
  --newRedditTheme-report: #1c1402;
  --newRedditTheme-search-syntaxHighlightBackgroundColor: #fff7e5;
  --newRedditTheme-search-syntaxHighlightColor: #0a0a0a;
  --newRedditTheme-titleText: #d7dadc;
  --newRedditTheme-upsell-appleIcon: #7d7d7d;
  --newRedditTheme-upsell-ssoButtonBorderColor: #d7dadc;
  --newRedditTheme-upsell-ssoButtonTextColor: #d7dadc;
  --newRedditTheme-voteText-base: #818384;
  --newRedditTheme-voteText-downvote: #7193ff;
  --newRedditTheme-voteText-downvoteShaded80: #5a75cc;
  --newRedditTheme-voteText-downvoteTinted80: #8da8ff;
  --newRedditTheme-voteText-upvote: #ff4500;
  --newRedditTheme-voteText-upvoteShaded80: #cc3700;
  --newRedditTheme-voteText-upvoteTinted80: #ff6a32;
  --newRedditTheme-widgetColors-appleIcon: #7d7d7d;
  --newRedditTheme-widgetColors-lineColor: #343536;
  --newRedditTheme-widgetColors-sidebarWidgetBackgroundColor: #1a1a1b;
  --newRedditTheme-widgetColors-sidebarWidgetBorderColor: #474748;
  --newRedditTheme-widgetColors-sidebarWidgetHeaderColor: #1a1a1b;
  --newRedditTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: rgba(
    26,
    26,
    27,
    0.6
  );
  --newRedditTheme-widgetColors-sidebarWidgetTextColor: #d7dadc;
  --newRedditTheme-widgetColors-sidebarWidgetTextColorShaded80: #acaeb0;
  --newRedditTheme-widgetColors-sidebarWidgetTitleColor: #818384;
}
a {
  text-decoration: none;
}
button,
input,
a {
  outline: none;
}
.links {
  color: var(--onedrive-blue);
  text-decoration: underline;
  cursor: pointer;
}
.todo-app__login-wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 30px 0px;
}
.todo-app__login-wrapper .todo-app__login-container {
  height: 100%;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: row;
  background-color: var(--white);
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-left {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__header {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  padding: 10px 0px;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__header
  h3 {
  margin-left: 116px;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__header
  p {
  margin-left: 117px;
  margin-top: 5px;
  font-size: 12px;
  max-width: 300px;
}
.todo-app__login-wrapper .todo-app__login-container .todo-app__social-logins {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__social-logins
  .platform {
  padding: 8px 0px;
  width: 320px;
  margin: 10px 0px;
  height: 50px;
  display: flex;
  align-items: center;
  flex-direction: row;
  background-color: var(--white);
  color: var(--onedrive-blue);
  border: 1px solid var(--onedrive-blue);
  border-radius: var(--roundedStandarad);
  outline: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__social-logins
  .platform
  p {
  margin-left: 50px;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__social-logins
  .platform
  img {
  border-radius: var(--roundedStandarad);
  margin-left: 4px;
  background-color: var(--white);
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__social-logins
  .platform:hover {
  background-color: var(--onedrive-blue);
  color: var(--white);
}
.todo-app__login-wrapper .todo-app__login-container .todo-app__divider-box {
  width: 150px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  text-transform: uppercase;
}
.todo-app__login-wrapper .todo-app__login-container .todo-app__divider-box p {
  margin: 0px 5px;
  font-weight: 600;
  color: var(--lightGray);
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__divider-box
  .divider {
  width: 53px;
  height: 1px;
  background-color: #c4c4c4;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: max-content;
  margin-top: 12px;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  form {
  display: flex;
  flex-direction: column;
  width: 320px;
  max-height: 100vh;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  form
  .form__box {
  display: flex;
  flex-direction: column;
  padding: 5px 8px;
  background-color: #faf9f6;
  border: 1px solid #c4c4c4;
  margin: 10px 0px;
  border-radius: var(--roundedStandarad);
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  form
  .form__box
  label {
  font-size: 13px;
  color: #101010;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  form
  .form__box
  input {
  margin-top: 2px;
  outline: none;
  border: none;
  background-color: transparent;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  form
  .form__box
  .random-name {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  form
  .form__box
  .random-name
  input {
  width: 100%;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  form
  .form__box
  .random-name
  a {
  margin-top: -17px;
  height: 22px;
  width: 22px;
  text-decoration: none;
  color: var(--lightGray);
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  form
  .form__box
  .show-password {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  form
  .form__box
  .show-password
  input {
  width: 100%;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  form
  .form__box
  .show-password
  a {
  margin-top: -17px;
  height: 22px;
  width: 22px;
  text-decoration: none;
  color: var(--lightGray);
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  .available-username-ideas {
  width: 100%;
  height: max-content;
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-direction: row;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  .available-username-ideas
  .available-username {
  width: max-content;
  height: max-content;
  border-radius: var(--roundendCircle);
  background-color: rgba(0, 90, 158, 0.2);
  color: var(--onedrive-blue);
  font-size: 12px;
  padding: 3px 8px;
  margin: 0px 5px;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  form
  .submit-form {
  width: 100%;
  padding: 10px 0px;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  form
  .submit-form
  input {
  width: 100%;
  height: 40px;
  text-transform: unset;
  letter-spacing: unset;
  line-height: 18px;
  font-weight: 600;
  border: none;
  padding: 10px 5px;
  color: #fff;
  background-color: var(--onedrive-blue);
  border-radius: var(--roundedStandarad);
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  .forgot-pass-username {
  display: flex;
  width: 320px;
  justify-content: flex-start;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  .forgot-pass-username
  p {
  font-size: 13px;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  .forgot-pass-username
  a {
  text-decoration: none;
  outline: none;
  cursor: pointer;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  .new-user-signup {
  margin-top: 35px;
  display: flex;
  width: 320px;
  justify-content: flex-start;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  .new-user-signup
  p {
  font-size: 13px;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  .new-user-signup
  a {
  text-transform: uppercase;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  font-weight: 600;
}
.todo-app__login-wrapper
  .todo-app__login-container
  .todo-app__login-container-right
  .todo-app__login-form
  .new-user-signup
  a:hover {
  text-decoration: underline;
}
.classic-button-fill {
  background-color: var(--onedrive-blue);
  padding: 7px 12px;
  border: none;
  outline: none;
  border-radius: var(--roundendCircle);
  color: var(--white);
}
/* TODO: SEPRATE CSS FILES  FOR THIS */
.expired__cache {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 10px 0px;
}
.expired__cache button {
  width: 120px;
  font-size: 16px;
  letter-spacing: 0.3px;
  height: 40px;
  font-weight: 600;
}
.todo-app__notify-user {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: max-content;
}
.todo-app__notify-user .todo-app__notify-user-snack {
  width: max-content;
  max-width: 300px;
  height: max-content;
  max-height: 150px;
  border-radius: var(--roundedStandarad);
  flex-direction: row;
  display: flex;
  align-items: center;
  padding: 4px 12px;
  background-color: #eee;
}
.todo-app__notify-user
  .todo-app__notify-user-snack
  .todo-app__notify-user-snack-content
  p {
  margin-left: 12px;
}
.todo-app__notify-user
  .todo-app__notify-user-snack
  .todo-app__notify-user-snack-content {
  width: 100%;
}
.todo-app__notify-user
  .todo-app__notify-user-snack
  .todo-app__notify-user-snack-icon {
  height: 50px;
  width: 50px;
}
#expired {
  margin: 10px 0px;
}
/* TODO: SEPRATE CSS FILES  FOR THIS */
#notifyUser {
  display: none;
  position: absolute;
  bottom: 20px;
}
#hideIcon {
  display: none;
}
#showIcon {
  display: none;
}
#shuffleNames {
  display: none;
}