@import url(https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap);
/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.generic {
  /* Sign in Form Styles */ }
  .generic .sign-in-form-container {
    background-color: #ffffff;
    min-height: 253px;
    width: 50%;
    max-width: 390px;
    margin: 60px auto 60px auto;
    border-radius: 6px;
    padding: 40px 60px 40px 60px;
    text-align: center;
    box-sizing: content-box;
    animation-duration: 0.5s;
    animation: dialog-keyframe;
    -webkit-animation-name: dialog-keyframe;
    -webkit-animation-duration: 0.5s;
    animation-fill-mode: forwards;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
  .generic .sign-in-form {
    font-size: 15px;
    line-height: 1.8em;
    color: #666666;
    text-align: center;
    margin: 0;
    font-weight: normal; }
  .generic .sign-in-form-title {
    margin: 0; }
  .generic .sign-in-form-sub-title {
    font-size: 15px;
    color: #848484;
    margin: 10px;
    line-height: 24px; }
  .generic .sign-in-form .bz-btn {
    margin-bottom: 30px !important;
    font-size: 17px;
    font-weight: 400; }
  .generic .spinner {
    width: 30px;
    margin-top: 50px;
    cursor: progress; }
  @media screen and (max-width: 414px) {
    .generic .sign-in-form-container {
      min-width: 325px;
      padding: 40px 10px 40px 10px; } }
  @media screen and (max-width: 320px) {
    .generic .sign-in-form-container {
      min-width: 280px; } }

/* App Wide Styles */
h3 {
  color: #262626;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.5em; }

/*
 * Copyright 2022, Backblaze, Inc.  All rights reserved.
 */
/* Styles for Sign In Form with split layout */
:root {
  --red-70: #87061b;
  --red-50: #e20626;
  --navy-50: #000033;
  --navy-40: #4c4c6e; }

/* min width of form when the screen is at least this wide */
/* the form's width won't go smaller than this */
/* Space for header and footer  */
.redesign {
  height: 100%;
  /* Form completely covers background video when there's not enough room for both   */
  /* Starts shrinking the horizontal padding to prepare for small screen widths */
  /* When the screen is small enough that the elements fill up max content width */
  /* 
    Gradually decreases width of title as screen width decreases
    Based off original 56px title
  */
  /* Tall screens */
  /* Styles for elements used in multiple child components of SignInForm */ }
  .redesign .sign-in-form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    align-items: flex-start;
    float: right;
    min-height: 85vh;
    height: 100%;
    min-width: 800px;
    width: 100%;
    margin: 0;
    padding: 120px 100px 100px 100px;
    background-color: #ffffff;
    font-family: 'DM Sans', Arial, Helvetica, sans-serif; }
    .redesign .sign-in-form button, .redesign .sign-in-form input {
      min-width: 385px;
      margin-top: 20px;
      margin-bottom: 20px; }
    .redesign .sign-in-form .inputs-container {
      width: 385px; }
    .redesign .sign-in-form input {
      font-family: 'DM Sans', Arial, Helvetica, sans-serif !important; }
  .redesign .sign-in-form-title {
    color: var(--red-50) !important;
    font-family: 'DM Sans', Arial, Helvetica, sans-serif !important;
    font-size: 56px !important;
    line-height: 1em !important;
    margin-bottom: 10px !important; }
  .redesign .sign-in-form-sub-title {
    font-size: 18px;
    color: var(--navy-50) !important;
    line-height: 24px;
    margin-bottom: 30px; }
    .redesign .sign-in-form-sub-title.large-subtitle {
      font-size: 24px;
      margin-top: 30px; }
  .redesign .spinner {
    width: 30px;
    margin-top: 50px;
    cursor: progress; }
  @media screen and (max-width: 800px) {
    .redesign .sign-in-form {
      width: 100vw;
      min-width: 200px; } }
  @media screen and (max-width: 1000px) {
    .redesign .sign-in-form {
      padding-left: 10vw;
      padding-right: 10vw; } }
  @media screen and (max-width: 384px) {
    .redesign .bz-alert-text,
    .redesign .inputs-container,
    .redesign input {
      /* 80 = screen width minus padding on both ends */
      min-width: 80vw !important;
      width: 80vw !important; } }
  @media screen and (max-width: 560px) {
    .redesign .sign-in-form-title {
      /* Starts shrinking font size */
      font-size: 10vw !important; } }
  @media screen and (max-width: 380px) {
    .redesign .sign-in-form-title {
      /* Pauses shrink on font size */
      font-size: 38px !important; } }
  @media screen and (min-height: 1200px) {
    .redesign .sign-in-form {
      /* stretches height */
      min-height: calc(100vh - 220px); } }
  .redesign .bz-click-link, .redesign .bz-anchor-link {
    color: var(--navy-50);
    text-decoration: underline;
    font-size: inherit; }
    .redesign .bz-click-link:hover, .redesign .bz-anchor-link:hover {
      color: var(--navy-40) !important; }
  .redesign .bz-alert-text:empty {
    display: inline; }
  .redesign .bz-alert-text:not(:empty) {
    background-color: #f7f0f0;
    color: #990000 !important;
    font-size: 15px;
    border-radius: 5px;
    margin-top: 0px;
    margin-bottom: 20px;
    display: block;
    padding: 10px 30px 10px 30px;
    min-width: 385px;
    width: fit-content; }

br {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.email-step .email-field {
  background: #ffffff url("/pics/icon-lightgrey-email.gif") no-repeat 9px 12px;
  text-indent: 30px; }

.email-step .hidden-password-field {
  display: none; }

.email-step .bz-btn-lg {
  display: block;
  width: 92.5%;
  margin: 10px auto 0 auto;
  padding: 12px !important; }

/* Styles for redesigned Sign In page */
.redesign .email-step .email-field {
  background: #ffffff url("/pics/icon-lightgrey-email.gif") no-repeat 9px 10px; }

.redesign .buy-page-sign-in-form .email-step .email-field {
  background: #ffffff; }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.bz-alert-text {
  min-height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #990000 !important;
  font-size: 13px;
  margin-bottom: 0; }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.bz-btn {
  border: 0;
  border-radius: 4px;
  font-weight: 300; }

.bz-btn-lg {
  padding: 12px 30px;
  font-size: 18px; }

.bz-btn-medium {
  padding: 6px 12px;
  font-size: 14px; }

.bz-btn-small {
  padding: 6px 12px;
  font-size: 12px;
  line-height: 26px;
  height: 26px; }

.bz-btn-blue {
  background-color: #3e88d2;
  color: #ffffff; }

.bz-btn-blue:hover {
  background-color: #509de9; }

.bz-btn-inverse {
  background-color: #ffffff;
  color: #3e88d2;
  border: 1px solid #3e88d2 !important; }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.bz-input {
  display: block;
  width: 92%;
  font-size: 18px;
  font-weight: 300;
  margin: 10px auto 0 auto;
  padding: 12px;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  color: #404040; }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.password-step .user-email {
  font-size: 16px;
  margin: 0;
  color: #262626;
  overflow-wrap: anywhere; }

.password-step .bz-alert-text-placeholder {
  min-height: 45px;
  margin-bottom: 0; }

.password-step .password-field {
  background: #ffffff url("/pics/icon-lightgrey-lock.gif") no-repeat 9px 10px;
  text-indent: 30px; }

.password-step .bz-btn-lg {
  display: block;
  width: 92.5%;
  margin: 10px auto 0 auto;
  padding: 12px !important; }

.password-step .compromised-credentials-alert {
  margin: 10px auto 15px auto; }

.password-step .compromised-credentials-alert .bz-alert-text {
  display: inline; }

.password-step .compromised-credentials-alert .bz-anchor-link {
  margin-left: 5px; }

.password-step .bz-link-container {
  display: flex; }

.password-step .password-reset-email-confirmation {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #262626; }

.password-step .password-reset-email-confirmation img {
  width: 250px; }

/* Styles for Redesigned Sign In Page */
.redesign .password-step {
  /* Contains alert message and additional elements within the red error block */ }
  .redesign .password-step .user-email {
    display: inline-block;
    font-size: 18px; }
  .redesign .password-step .bz-alert-text-container {
    background-color: #f7f0f0;
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px; }
    .redesign .password-step .bz-alert-text-container .bz-alert-text {
      margin-top: 0;
      margin-bottom: 0; }
    .redesign .password-step .bz-alert-text-container .bz-anchor-link {
      padding: 10px 30px 10px 30px; }
  .redesign .password-step .bz-alert-text-placeholder:empty {
    display: inline; }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.bz-anchor-link {
  font-size: 14px;
  text-decoration: none;
  color: #244db6;
  margin: 0 auto 0 auto; }

.bz-anchor-link:hover {
  cursor: pointer;
  color: #5297ea; }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.bz-click-link {
  font-size: 14px;
  text-decoration: none;
  color: #244db6;
  margin: 0 auto 0 auto; }

.bz-click-link:hover {
  cursor: pointer;
  color: #5297ea; }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.buy-page-password-step .user-email {
  display: inline;
  font-size: 16px;
  margin: 0; }

.buy-page-password-step .password-field {
  background: #ffffff; }

.buy-page-password-step .password-step-email-container {
  margin-bottom: 15px; }

.buy-page-password-step .bz-link {
  display: block;
  width: 59px; }

.buy-page-password-step .compromised-credentials-alert {
  margin: 10px auto 15px auto;
  text-align: center; }

.buy-page-password-step .compromised-credentials-alert .bz-alert-text {
  display: inline; }

.buy-page-password-step .compromised-credentials-alert .bz-anchor-link {
  margin-left: 5px; }

.buy-page-password-step .password-reset-email-confirmation {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.buy-page-password-step .password-reset-email-confirmation img {
  width: 250px; }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.two-factor-step .code-field {
  width: 160px;
  background: #ffffff url("/pics/icon-field-code.jpg") no-repeat 2px 2px;
  text-indent: 30px; }

.two-factor-step .bz-btn-lg {
  display: block;
  width: 43.5%;
  margin: 10px auto 0 auto;
  padding: 12px !important; }

.two-factor-step .switch-row-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px; }

.two-factor-step .switch-annotation {
  max-width: 245px;
  margin-left: 6px;
  text-align: left; }

.two-factor-step .resend-code-container {
  margin-top: 10px; }

.two-factor-step .resend-code-annotation {
  margin-left: 6px; }

.two-factor-step .bz-link-container {
  display: flex; }

/* Styles for redesiged Sign In Page */
.redesign {
  /* Styling for containters of the switch component */ }
  .redesign .rounded-switch-row-container {
    display: flex;
    justify-content: left;
    align-items: center; }
    .redesign .rounded-switch-row-container .rounded-switch-annotation {
      max-width: 100%;
      margin-left: 6px;
      text-align: left; }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.bz-switch-container {
  display: inline-block;
  border: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 70px; }

#bz-switch-checkbox {
  display: none; }

.bz-switch-label {
  border-radius: 5px;
  cursor: pointer;
  display: block;
  overflow: hidden; }

.bz-switch-inner {
  display: block;
  margin-left: -100%;
  -webkit-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s;
  width: 200%; }

.bz-switch-inner-checked-text,
.bz-switch-inner-unchecked-text {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 400;
  height: 39px;
  line-height: 30px;
  padding: 4% 0 0;
  width: 50%;
  color: #fff; }

.bz-switch-inner-checked-text {
  background-color: #3e88d2;
  padding-left: 15%;
  text-align: left; }

.bz-switch-inner-unchecked-text {
  background-color: #808080;
  padding-right: 15%;
  text-align: right; }

.bz-switch-circle {
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 5px;
  bottom: 0;
  display: block;
  margin: 1px;
  position: absolute;
  right: 54px;
  top: 0;
  -webkit-transition: all 0.3s ease-in 0s;
  transition: all 0.3s ease-in 0s;
  height: 74%;
  width: 10px; }

#bz-switch-checkbox:checked + .bz-switch-label .bz-switch-inner {
  margin-left: 0; }

#bz-switch-checkbox:checked + .bz-switch-label .bz-switch-circle {
  right: 0; }

/*
 * Copyright 2022, Backblaze, Inc.  All rights reserved.
 */
/* Space needed for circle including margins */
/* Space between button's edge and button's text */
#bz-redesign-switch-checkbox {
  display: none; }

.bz-redesign-switch-container {
  position: relative;
  width: fit-content;
  min-width: fit-content;
  box-sizing: content-box;
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/* Label text and circle of the switch button */
.bz-redesign-switch-label {
  border-radius: 20px;
  background-color: #808097;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: block;
  overflow: hidden;
  min-height: 34px;
  padding: 2px;
  /* Overrides */
  margin-bottom: 0px;
  /* Text is shifted right when unchecked to make room for circle on the left */
  padding-left: 30px;
  padding-right: 10px;
  /* Checked and unchecked texts */ }
  .bz-redesign-switch-label .bz-redesign-switch-inner {
    font-weight: bold;
    color: #fff;
    padding-left: 0px;
    padding-right: 0px;
    /* Used to determine width of container based on width of unchecked text */ }
    .bz-redesign-switch-label .bz-redesign-switch-inner .bz-redesign-switch-inner-checked-text {
      visibility: hidden; }
    .bz-redesign-switch-label .bz-redesign-switch-inner .bz-redesign-switch-inner-unchecked-text {
      position: absolute;
      width: calc(100% - calc(30px + 10px));
      top: 2px;
      visibility: visible; }
    .bz-redesign-switch-label .bz-redesign-switch-inner .bz-redesign-switch-inner-unchecked-text-spaceholder {
      visibility: hidden;
      height: 0px; }
    .bz-redesign-switch-label .bz-redesign-switch-inner .bz-redesign-switch-inner-checked-text,
    .bz-redesign-switch-label .bz-redesign-switch-inner .bz-redesign-switch-inner-unchecked-text,
    .bz-redesign-switch-label .bz-redesign-switch-inner .bz-redesign-switch-inner-unchecked-text-placeholder {
      text-align: center;
      margin-top: 1px; }
  .bz-redesign-switch-label .bz-redesign-switch-circle-container {
    position: absolute;
    width: 100%;
    top: 2px;
    left: 3px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease; }
    .bz-redesign-switch-label .bz-redesign-switch-circle-container .bz-redesign-switch-circle {
      margin-top: 3px;
      float: left;
      background-color: #fff;
      border-radius: 50%;
      height: 24px;
      width: 24px; }

#bz-redesign-switch-checkbox:checked + .bz-redesign-switch-label {
  background-color: #E20626;
  /* Makes room for circle on the right */
  padding-right: 30px;
  padding-left: 10px;
  /* Switches text shown */
  /* Slides circle to the right */ }
  #bz-redesign-switch-checkbox:checked + .bz-redesign-switch-label .bz-redesign-switch-inner .bz-redesign-switch-inner-checked-text {
    visibility: visible; }
  #bz-redesign-switch-checkbox:checked + .bz-redesign-switch-label .bz-redesign-switch-inner .bz-redesign-switch-inner-unchecked-text {
    visibility: hidden; }
  #bz-redesign-switch-checkbox:checked + .bz-redesign-switch-label .bz-redesign-switch-circle-container {
    transform: translateX(calc(100% - 30px)); }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.buy-page-two-factor-step .code-field {
  width: 160px;
  background: #ffffff; }

.buy-page-two-factor-step .bz-btn {
  display: block;
  margin-bottom: 30px !important; }

.buy-page-two-factor-step .switch-row-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px; }

.buy-page-two-factor-step .switch-annotation {
  max-width: 245px;
  margin-left: 6px;
  text-align: left; }

.buy-page-two-factor-step .resend-code-container {
  text-align: center;
  margin-top: 10px; }

.buy-page-two-factor-step .resend-code-annotation {
  margin-left: 6px; }

.buy-page-two-factor-step .bz-link-container {
  display: flex; }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.backup-code-step .code-field {
  width: 160px;
  background: #ffffff url("/pics/icon-field-code.jpg") no-repeat 2px 2px;
  text-indent: 30px; }

.backup-code-step .bz-btn-lg {
  display: block;
  width: 43.5%;
  margin: 10px auto 0 auto;
  padding: 12px !important; }

.backup-code-step .bz-link-container {
  display: flex; }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.forgot-password-step .email-field {
  background: #ffffff url("/pics/icon-lightgrey-email.gif") no-repeat 9px 12px;
  text-indent: 30px; }

.forgot-password-step .bz-btn-lg {
  display: block;
  width: 92.5%;
  margin: 10px auto 0 auto;
  padding: 12px !important; }

.forgot-password-step .more-options-text-container {
  margin: 0 auto 12px auto; }

/*
 * Copyright 2023, Backblaze, Inc.  All rights reserved.
 */
.spinner-svg-container {
  height: 30px;
  width: 30px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: auto;
  margin-right: auto; }

.spinner-svg {
  animation: spinner-svg 2s linear infinite both; }

@keyframes spinner-svg {
  0% {
    transform: rotateZ(0deg); }
  100% {
    transform: rotateZ(360deg); } }

.spinner-svg-circle {
  animation: spinner-svg-circle 1.4s ease-in-out infinite both;
  fill: transparent;
  stroke: #000033;
  stroke-dasharray: 285;
  stroke-linecap: round;
  stroke-width: 10px;
  transform-origin: 50% 50%; }

@keyframes spinner-svg-circle {
  0%, 25% {
    stroke-dashoffset: 280;
    transform: rotate(0); }
  50%, 75% {
    stroke-dashoffset: 75;
    transform: rotate(45deg); }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg); } }

/*
 * Copyright 2018, Backblaze, Inc.  All rights reserved.
 */
.buy-page-sign-in-form-container {
  margin: 0 auto; }

.buy-page-sign-in-form {
  font-size: 15px;
  font-family: 'DM Sans';
  line-height: 1.8em;
  color: var(--navy-50);
  margin: 0;
  font-weight: normal; }

.buy-page-sign-in-form .bz-alert-text {
  text-align: center;
  min-width: 100% !important;
  width: 100% !important; }

.buy-page-sign-in-form-input-label {
  min-width: 100px;
  font-size: 17px;
  line-height: 32px;
  margin-right: 10px; }

.buy-page-sign-in-form .bz-input {
  width: 100%;
  text-indent: 0;
  border: 1px solid #b3bac8;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 400;
  padding: 10px;
  vertical-align: middle;
  margin: 0 !important; }

.buy-page-sign-in-form .bz-btn {
  width: 100%;
  max-width: 400px;
  margin: 30px auto 10px;
  padding: 8px 30px !important;
  font-size: 15px;
  font-weight: 400;
  box-sizing: border-box;
  border-radius: 6px;
  border: none;
  line-height: 1.5em;
  text-align: center;
  text-decoration: none; }

.buy-page-sign-in-form .spinner {
  display: block;
  width: 30px;
  margin: 0 auto 0 auto;
  padding: 70px auto 70px auto;
  cursor: progress; }