/* inter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/inter-v20-latin-300-iJoUx7P.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/inter-v20-latin-regular-poxsSdI.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/inter-v20-latin-500-Uwgfwtt.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/inter-v20-latin-600-keCwlca.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/inter-v20-latin-700-_eucScQ.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* space-grotesk-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/space-grotesk-v22-latin-300-5NLfdar.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* space-grotesk-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/space-grotesk-v22-latin-regular-UaRjChW.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* space-grotesk-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/space-grotesk-v22-latin-500-vzQeC3q.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* space-grotesk-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/space-grotesk-v22-latin-600-958umbo.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* space-grotesk-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/space-grotesk-v22-latin-700-SNsywT4.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
  background: #f5f5f5;
  color: var(--secondary-color);
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;

  --primary-color: #00dbc9;
  --primary-color-hover: #00d2bc;
  --secondary-color: #334756;
}

.btn {
  --bs-btn-font-size: 14px;
  --bs-btn-disabled-bg: #cccccc;
  --bs-btn-disabled-border-color: #cccccc;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-opacity: 1;
  border-radius: 23.5px;
  padding-left: 28px;
  padding-right: 28px;
}

.btn-primary {
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-bg: var(--primary-color-hover);
  --bs-btn-hover-border-color: var(--primary-color-hover);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
}

.btn-light {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #cccccc;
  --bs-btn-color: var(--secondary-color);
  --bs-btn-hover-bg: #f5f5f5;
  --bs-btn-hover-border-color: #cccccc;
  --bs-btn-hover-color: var(--secondary-color);
  --bs-btn-active-bg: #f5f5f5;
  --bs-btn-active-border-color: #cccccc;
  --bs-btn-active-color: var(--secondary-color);
}

.btn-microsoft {
  align-items: center;
  display: flex;
  gap: 27px;
  justify-content: center;
}

.btn-microsoft svg {
  height: 21px;
  width: 21px;
}

.app {
  display: grid;
  grid-template-columns: minmax(0, 586px) 1fr;
  margin: 0;
  padding: 0;
  height: 100vh;
}

.content {
  align-items: center;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 58px 42px 90px;
}

.background {
  background-position: right center;
  background-size: cover;
}

.logo {
  height: auto;
  margin-bottom: 68px;
  max-width: 456px;
  width: 100%;
}

.logo svg {
  display: block;
  width: 164px;
}

.content-box {
  --card-padding: 60px;
  background: white;
  border: 1px solid #dedede;
  border-radius: 8px;
  margin: auto;
  max-width: 456px;
  padding: var(--card-padding);
  width: 100%;
}

.content-box h1 {
  color: var(--secondary-color);
  font-family: "Space Grotesk", sans-serif;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 51px;
  text-align: center;
}

.content-box .subtitle {
  font-size: 14px;
  margin-bottom: 2px;
  text-align: center;
}

.two-factor-method {
  color: #989898;
  font-size: 14px;
  margin-bottom: 26px;
  text-align: center;
}

.content-box .form-group {
  margin-bottom: 10px;
}

.content-box label {
  margin-bottom: 3px;
}

.content-box .form-control {
  border-color: #cccccc;
  border-radius: 4px;
  font-size: 14px;
  padding: 12px;
}

.content-box .form-control::placeholder {
  color: #c6c6c6;
}

.password-field {
  position: relative;
}

.password-field .form-control {
  padding-right: 45px;
}

.password-toggle {
  background: none;
  border: 0;
  padding: 0;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.password-toggle svg {
  display: block;
  fill: none;
  height: 15px;
  stroke: #cccccc;
  stroke-width: 1.5;
  width: 21px;
}

.password-toggle-slash {
  display: none;
}

.password-toggle[aria-pressed="true"] .password-toggle-slash {
  display: inline;
}

.content-box .form-buttons {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-top: 26px;
  text-align: right;
}

.form-signin .form-buttons {
  margin-top: 9px;
}

.form-signin:has(input:placeholder-shown) button[type="submit"] {
  --bs-btn-bg: #cccccc;
  --bs-btn-border-color: #cccccc;
  --bs-btn-hover-bg: #cccccc;
  --bs-btn-hover-border-color: #cccccc;
  --bs-btn-active-bg: #cccccc;
  --bs-btn-active-border-color: #cccccc;
}

.alert {
  font-size: 14px;
}

.one-time-code {
  font-family: "Aptos Mono", monospace;
  letter-spacing: 0.5em;
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.privacy-content,
.privacy-content-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.privacy-content-body {
  --fade-top: 0px;
  --fade-bottom: 0px;
  margin: 0 calc(-1 * var(--card-padding));
  mask-image:
    linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent),
    linear-gradient(#000, #000);
  mask-position: left, right;
  mask-repeat: no-repeat;
  mask-size: calc(100% - var(--card-padding)) 100%, var(--card-padding) 100%;
  overflow-y: auto;
  padding: 0 var(--card-padding);
  scrollbar-color: #cccccc transparent;
}

.privacy-content-body > :last-child {
  margin-bottom: 0;
}

.privacy-content-header {
  margin-bottom: 28px;
}

.privacy-content-header h1 {
  margin-bottom: 6px;
}
.privacy-content-header p {
  color: #989898;
  margin-bottom: 0;
}

.privacy-content h1 {
  font-size: 22px;
  text-align: left;
}

.privacy-content,
.privacy-content p {
  font-size: 14px;
}

.privacy-content h2 {
  font-size: 19px;
}

.privacy-content h3 {
  font-size: 17px;
}

.privacy-content h4 {
  font-size: 15px;
}

.separator {
  font-size: 14px;
  margin: 18px 0;
  text-align: center;
}